PDA

View Full Version : Fullscreen background image size in css


beastlinks777
08-18-2015, 03:34 AM
Just want to share how to make a fullscreen background image that fit the browser width and height.

.div {
background: rgba(0, 0, 0, 0) url("/images/background.jpg") no-repeat fixed center center / cover ;
height: 100vh;
}
harikri
08-18-2015, 04:46 AM
Thanks for sharing.
jane1
08-19-2015, 08:00 AM
Nice but If you put width="auto" then i think it could also work.
shine
08-19-2015, 01:19 PM
Another solution would be to use backstretch or anystretch which are both JQuery
Sherin
03-31-2020, 03:01 AM
Please try this css code.

<!DOCTYPE html>
<html>
<head>
<body>

<div class="bg"></div>

<h1>Fullscreen background image size in css</h1>
</body>
</head>


<style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("/images/background.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</html>
hearpary
06-27-2021, 09:09 AM
For example, I prefer to choose how my browser looks. I often work online and don't like to see bright annoying backgrounds. I even sometimes edit photos and change the background to make it more neutral colors. If you are interested, I use online photo background remover free (https://depositphotos.com/bgremover.html) for this. Since I want to see more options in the browser as well.
My point is that if a person wants to be in the trend, he can set any background he likes. If he does it, then he has the time and desire for it. It's like everything xD