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.

---

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)

链接地址: http://www.djcxy.com/p/89172.html

上一篇: 我无法在我的div背景中获得这张照片

下一篇: 调整为屏幕宽度约束比例的背景图像