Need bg image to stretch to max height or width, whichever is greater


#1

Hi there everyone!

I’m trying to duplicate a template and I’m on a sticking point. Basically, I need the header’s background image to perform like this. It stretches the background image width wise, keeping ratio, then when you shrink the width of the page down, it then stretches it vertically to keep it from repeating and keeps the ratio width wise.

My page is not doing that. My page stretches width wise but when I go to shrink the width of the page, it begins tiling vertically.

What do I need to do to keep the aspect ratio and have it stretch to the direction that needs it?

Thanks for your time!


#2

You can inspect the element to see specifically how they do it. I did it very quickly and noticed that their approach isn’t a background image. It is an image and they place content above it absolutely positioned.

They specify the width and height of the image (and container?) for certain break points. I could be wrong, but check it out.

A simpler way to do this - since you already are using a background image is to add these rules to your CSS. Just add the background-size:cover - you might have to look up what browsers you want to support and add additional support, but that’s the path I would test very quickly to see if it’s what I want.

#header{background:url(../images/header.png)no-repeat 50% 50%;background-size:cover;

#3

Try to specify the size in percent and not in pixels.


#4

Yes as mentioned above just use background-size:cover to maintain aspect ratio and to fill the whole header area properly :slight_smile:


#5

It doesn’t look like there should be any problem with cover support (IE8?)
https://caniuse.com/#feat=background-img-opts