Joomla Template Question - Solution for background-size:cover

Hello there,
I have started using this joomla template for my website:
Joomla Templates Demo - YOOtheme
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:
ΑΡΧΙΚΗ
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

Welcome to the forums, @pmpouthalakis.

[quote=“pmpouthalakis, post:1, topic:208325”]
You can see example page here:ΑΡΧΙΚΗ
[/quote]Um … actually, no.

Please could you try posting that link again?

I can’t read the link either, but FWIW, this is how I would generally set up a full-screen background image:

    background-color: #aaa;
    background-image: url(../images/background.jpg);
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

That should fill the screen at any size.

Of course, at some (many) screen sizes the aspect ratio of the screen will not match that of the image, so cropping will occur on either the sides or the top and bottom. But to me that is better than either squashing the image or having a “letterbox” effect, though you could set it up that way if you prefer it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.