Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Solution for background-size:cover

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #235204
    pm4698
    Participant

    Hello there,

    I have started using this joomla template for my website:

    http://yootheme.com/demo/joomla/stage

    If you can see the logic of the template, is to show one content per screen and there is a side menu with dots at the right of the screen to go to the next content.

    If you see CSS of the first area (tm-fullscreen-a) you see that for the image there is the background-size:cover; property, but if you try to change the width of your browser you will see that is adaptable (ok by this!) but you miss some elements from the image. The advantage for me is that the image takes all the height so your content does not appear much blank, but i have issue with the image.

    You can see example page here:
    http://boxeat.gr/final/

    Try to change the width of your browser and see the first image. I tried the background-size:contain; property which has the effect i need for the width, but the height is not filled for the screen. Could you please give some advice for the best solution for this?

    Thank you in advance

    #236102
    mhodges44
    Participant

    The pen below demonstrates how background-size: cover; is not a catch all, and shows one potential solution, although it is not perfect either. It’s a tricky problem with no great solution

    http://codepen.io/mhodges44/pen/ojrRKy

    Related css-tricks post about this issue here: https://css-tricks.com/forums/topic/full-screen-cover-background-overflow/

    #236108
    Shikkediel
    Participant

    I’m not sure what the issue is exactly, please elaborate.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.