Fixed and scalable background issue

[Raleigh]

Hi!

I’m trying to use a background image that’s both fixed and responsive to the size of the users browser. Technically it works on both counts.. Here’s the problem: what I want it to do is resize based on the height of the div, which is 600px. What it’s actually doing is resizing itself based on the height of the full browser window..

Here’s the CSS I’m currently using for it:

CSS:
.banner-home {
height: 600px;
background: top no-repeat url(../images/banner-home.jpg) fixed;
background-size: cover;
}

The ‘background-size: cover’ works fine on it’s own, as does ‘background: fixed’. It’s only when I put the two together that it makes the image unnecessarily huge! Any tips on how to make it work how I want?

Thanks!!

[Paulie_D]

Could you make a Codepen.io example please?

[Raleigh]

Sure thing! Here’s the link:

http://cdpn.io/qHvjb

Thanks!

[Paulie_D]

It looks fine to me…I’m curious what it you are trying to achieve but this might help you.

https://css-tricks.com/how-to-resizeable-background-image/

[Raleigh]

I know it does in fact work. The issue I have is that I don’t want the image to fill the whole browser windows height, since the viewable area is only 600px high. I want it to scale the image with the width of the browser, but not the height which is what it seems to be doing right now.. The sizing is great with just “background-size: cover;”, I only have an issue when I add in “fixed”. Does that make any more sense?

Thanks!!

[Paulie_D]

From what I can tell…and I’m sure someone better than me will correct me, the specific effect you are after isn’t possible with a bg image.

[nigelc]

The problem is though that if you set a fixed height in px at 1280px wide the image will be fine. However in a 640px wide viewport the wine glasses will look like champagne flutes and in a whacking big 2560px display they will look like brandy balloons.

Also if you set position:fixed; to an object you remove it from the normal document flow in the same way as setting position to absolute. This means that setting background size to cover it will extend to the full size of the window not to the div.

Add height:600px to the .banner CSS and ditch the background size cover.

Otherwise try setting the width to 100% and allow the height to scale accordingly.

[Paulie_D]

Also if you set position:fixed; to an object you remove it from the normal document flow in the same way as setting position to absolute. This means that setting background size to cover it will extend to the full size of the window not to the div.

I think you are confusing

position:fixed;

and

background-attachment:fixed.

[Author]

Posts