Search code examples
htmlcssimagebackground-imagescale

Background Image That Adjusts to Screen Width Constraining Proportions

I would like to take an image I have (on it's own, it is not big enough to fit the screen width) and make it so that the image fits the screen width and adjusts the height accordingly to maintain proportions (width: 100% would not maintain the proportions, and I don't want it to be the full height of the screen since the page will be longer than the fold).

An example of what I want to achieve is with the blue background image in this site and you'll notice that the image itself does not move when the user scrolls, which is an effect I would also want to achieve and I believe would be achieved if the image is set as a background image.

Solution

  • That sounds like

    background-attachment: fixed;
background-size: contain;
background-position: top center;

    should set you in the right direction. (Info on background-attachment, background-size, and be aware of limited browser support in old IEs)