Reconciling using background-size: cover while building a website from a psd file?
Question
When I use background-size: cover; it causes the image to scale larger to fit the screen. This scaling means the background image doesn't match the dimensions from the psd file I'm trying to replicate. How do I keep the responsiveness that background-size: cover; provides, while maintaining the exact measurements from the psd? Thanks a lot for any help.
html:
<body>
<div class="bg-img"></div>
</body>
css:
.bg-img {
position: absolute;
background: url(../images/site-bg.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
2 answers
solution1
0 2015-01-21 00:59:03
background: url(../images/site-bg.jpg) no-repeat center center;
？
solution2
0 2015-01-21 05:46:13
If your intention is to have the background image be able to grow to the maximum 'natural' size of the source image and then not be scaled any larger, this would likely have to be achieved through some combination of media queries (testing both portrait, landscape and square window sizes at various sizes), CSS, or JavaScript.
You could consider using a max-width and/or max-height attribute, along with top: 0; bottom: 0; left: 0; right: 0; margin: auto; top: 0; bottom: 0; left: 0; right: 0; margin: auto; . This may yield acceptable results, though it may be that JavaScript is where you would need to look for the most reliable result.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.