Menu
I have a svg file that I want to use as full page background. I tried as follow:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Page Background Image | Progressive</title>
<style>
* { margin: 0; padding: 0; }
html {
background: url(city.svg) no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
The svg image is showing on browser, but very wired as you can see on pic
Now when I resize the window, then it shows as follow:
On the first pic, I miss one quarter of the pic. When I resize the window, then it just cut some part the pic. How can I solve this problem?
This site shows how works. I just wanted the same.
798
The problem you are facing is because the image is stretched to cover its container thanks to background-size:cover; it also stretches keeping its proportions. Also, the background is centered, this means that its center will be exactly in the center of its container. So when the image is a square, if it has to fit in a rectangle, some parts will be hidden...
By having the picture centered, and with a ratio width/height different than its container the left-over height will flow through the top and bottom, hiding the ground and some clouds in your example.
Positioning the background differently might be better in this exact example. I suggest you position it at bottom, this way exceeding height will overflow at top, allowing you to see the ground but not all the clouds.
You might prefer to display the whole picture, by stretching it without keeping the aspect ratio...
My suggestion:
html {
background: url(city.svg) no-repeat center bottom fixed;
background-size: cover;
//To see the whole picture but keep aspect ratio (will leave blank parts)
//background-size: contain;
//To see the whole picture but loose aspect ratio
//background-size: 100% 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
