Full Height Background Images

Support
#1

hi

I have had a look through the forum posts but cannot find exactly what I am after here.

I wish to set a background image for a page and enable Parallax. Image will be 1440px x 900px. I want the image to to be responsive on different screens, resizing as required and always being 100% width and height. This is absolutely possibly using an Image element, but there are issues with a Background Image.

If I set min height 900px in Style, the height is static yet crops some off the bottom. How is that possible if the image is 900px? If I set height, the same result. I want it to behave like an image would if you used the contain property in CSS. Maintain proportion but be responsive to screen sizes.

if I set height: 100vh; I get the height perfect, but I am unable to have this along with width: 100%;. The height is perfect but the width is cropped on smaller screens

Is it at all possible to have 100% responsive background images? if not, is it possible to have the Parallax effect on a standard Image element?

Barring that, is it possible to have the image change from a background to an image element on smaller screens, so as to make it responsive on smaller screen and retain its proportions?

Regards

#2

Hi again

Just after some more thinking, I am wondering if it is possible to designate different Background Images for different screen sizes and have them all work with the Parallax effect.

So if the screen was say 2560 x 1440 which is my iMac, I could have width at 100% and Parallax would still be pretty good for some screens larger than that, but I would be happy if there was some cropping at that point.

I think my initial image size should change from the 1440 x 900 to reflect a 16:9 ratio, so I will do that, but I am more concerned about having the images change at different screen sizes.

So if I started with an image at 2560 x 1440, another at maybe 1600 x 900 and another at 1024 x 768. I might only need maybe 3 o4 4 image sizes and then one for a fixed image from 767px, as I am thinking that from 767px and below that the Parallax effect stops and the image is just an Image element rather than a background Image. That way it will resize perfectly all the rest of the way down.

What is your view on doing it this way and how could it be implemented using CSS so that Parallax still works on each of the Background Images?

regards

#3

Hi there,

Yes, it is possible to do so by adding some extra CSS. This will be a customization as there is no such a feature in our theme.

First of all, you can add a unique class to the section which you want to have multiple background images:

Then you can add the extra image background files per different viewports. You can add the CSS code to X > Launch > Options > CSS:

@media (min-width: 767px) and (max-width: 1024px) {
    .multiple-parallax {
        background-image: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') !important;
    }    
}
@media (min-width: 1025px) and (max-width: 1600px) {
    .multiple-parallax {
        background-image: url('https://kbob.github.io/images/sample-3.jpg') !important;
    }    
}
@media (min-width: 1601px) {
    .multiple-parallax {
        background-image: url('https://farm1.static.flickr.com/108/298214906_edff0463bd_m.jpg') !important;
    }    
}

Change the URLs with the images you think would be better on those screens.

Hope it helps.

#4

hi Christopher

Thanks so much for your reply

Yes, I reckon that will work perfectly. I will try it and let you know.

So a large image for above 1600px, a medium image for 1025 to 1600 and a small one for 768 to 1024.

What then to do about the image which will not have parallax from 767 and down? What CSS will stop the Parallax enabled in the actual page?

One question re sizes, though. Which size image to actually put into the page - large, medium or small?

Thanks again, Christopher

regards

#5

Hi Guy,

The way that the parallax effect is created is by incorporating the CSS, background-attachment: fixed;. This fixes the background image to the browser window so that it appears to stay still whilst the rest of the content scrolls up and down.

Therefore to change that behaviour, we need to change the CSS to background-attachment: scroll; for the browser widths that you want it to flow normally, in your case, widths of up to 767px. Alternatively, you can leave the default behaviour as scrolling, then fix the background at higher device widths.

Knowing this, we can build on Christopher’s code as follows:

@media (max-width: 766px) {
    .multiple-parallax {
        background-image: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') !important;
        background-attachment: scroll !important;
    }
}
  
@media (min-width: 767px) and (max-width: 1024px) {
    .multiple-parallax {
        background-image: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') !important;
    }   
}
    @media (min-width: 1025px) and (max-width: 1600px) {
    .multiple-parallax {
        background-image: url('https://kbob.github.io/images/sample-3.jpg') !important;
    }    
}
    @media (min-width: 1601px) {
    .multiple-parallax {
        background-image: url('https://farm1.static.flickr.com/108/298214906_edff0463bd_m.jpg') !important;
    }    
}

To answer your second question, since both images will actually be loaded by the browser (that which is placed when building the page in Cornerstone and the one you’ve added via CSS), we want the smallest file size to be loaded, so that will most likely be your small image.

Hope this helps, Guy!

#6

hi Matt

Thanks so much for your reply

Brilliant. I will alter my CSS to match, though I still have a question or two.

The first and second queries have me confused as I am trying to target screen up to 767 with the first and from 768 for the second. Was there a reason for using 767 to 1024 rather than 768 to 1024?

With the class being multiple-parallax, this will mean those images will be used for every page where I use that class, whereas I want each page to have separate images. Do I just need to use the page ID in the media queries so each page has separate images?

The last thing relates to retina images. So I have created each of the 4 images in standard size eg 1600 x 900 as well as 3200 x 1800. The naming reflects that with the retina images being @2x in the naming. Is there anything additional that needs to be done to ensure the right images are being used for the right screen resolution?

Thanks so much for your help

#7

Hi There,

Feel free to adjust screen width values. Normally, yes it is 767px but we can adjust it as we seem fit to our site.

Let’s clarify CSS structure. A class means we can use it multiple times in different page. An ID means it should be unique and we can only use it once. In your case, we can use the class. Add the class on each section on different pages where you want to implement this setup, then we have to add the CSS on Cornerstone Page > Custom CSS and not on Global CSS. CSS added on Cornerstone will work on that specific page only. So on each page we will add the same CSS just with different background images. This way we are using the same class but defining different background image per page.

As long as you calling the correct background image per screen size, that is fine.

Hope this helps.

#8

hi Lely

Thanks so much for your reply

I get it now, so use the CSS on the individual pages, rather than globally.

I will do that now.

And what of the retina question I raised? I have the required files uploaded, twice the size for retina and all of those have @2x at the end of the filename. So is there anything that needs to be done from my end to have the correct images served to the browser?

Thanks again

#9

Hi There,

Just double the original size of your image and that will appear nice and crisp on retina screens and thats it. Though you need to balance between the quality of your image and its file size (big file size means more loading time).

Thanks,

#10

cheers Friech

Regards

#11

You are most welcome. :slight_smile: