Background-image on body - image have zoom in it
Question
I would like to place a background image on the body element to be stretch on the entire browser screen.
The problem is that while doing this the image getting some "zoom in" and image is cutting due to this.
For example let take this current image:
http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg
And see how its zoom the image and cuts some parts around.
I've tried to play with the CSS background cover features but with no luck.
body { background-image: url('https://i.stack.imgur.com/7xThY.jpg'); background-size: cover, 100%; background-position: 50% 50%; background-attachment: fixed; }
3 answers
solution1
0 2019-05-24 08:27:25
Try this it might work
<html>
<head>
<title>This is a test page</title>
<style>
body {
background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
background-size: 100%;
backgroun-reapeat:no-repeat
}
</style>
</head>
<body>
</body>
</html>
solution2
0 2019-05-24 08:37:21
body { background-image: url('https://i.stack.imgur.com/7xThY.jpg'); background-size: 100vw 100vh; background-position: 50% 50%; background-attachment: fixed; }
solution3
0 2019-05-24 08:56:55
did you mean something like this?
html{
min-height:100%;
position:relative;
}
body {
height: 100%;
background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
}
i didnt put it in a snippet because the code doesnt work in it. i tried it in chrome, firefox, edge and even internet explorer and it seems to work fine. hope this helps.
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.