HTML/CSS How to make your body background fit perfectly.

broges

Welcome To The Machine
Mar 6, 2014
571
312
HOW TO MAKE YOUR BODY BACKGROUND FIT PERFECTLY.
Hello,
a lot of people don't know how to make their body background image fit perfectly with the browser. It's simple to do, let me show you.

First, you want to grab your background image, let's make an images folder in our main folder and place all our desired images in there.

6ac5acf72929451ca27546c4b1a7de23.png


Now let's insert this background image into our CSS.
d3f2206778ee4c0fb125067b9491365d.png

9590f9e0b7154d11b8b5be747efd1fd8.png

Pretty ugly right? Let's see how we can fix this.
fb4490aaf76f4974bbf0179a55885aba.png

background-repeat: no-repeat; makes it so the image doesn't repeat itself like it does in that screenshot.
background-size: cover; makes it so it coveres the whole screen.
position: fixed; will makes it so the image stays in that spot and doesn't resize when the browser is resized/viewed on other devices.
064eeb1253e0494aab9f275f89265f45.png

The height on this image was too small, but you catch my drift.
See, simple! Hope this helped for anyone wondering how to do this.​
 

Users who are viewing this thread

Top