Help with background image centering

Help with background image centering
0

#1

Hi, I’m pretty new to coding and I’m working my way through the freeCodeCamp front end projects at the moment.

I’m making a portfolio page for a photographer and I’m having trouble with positioning a background image on the home page.

They want the image to fill the screen, for it not to resize if the window is resized, and for it to be centered in the browser window no matter the device’s screen size.

Currently I have the image set as the background of the body, like so:

body {

background: url(install2medium.jpg);
background-repeat: no-repeat;
background-size: cover;

}

And I have used javascript to size the body depending on the height of the screen:

But while this gives me an image that is the right size, it is not centered in the window - I want it to be cropped at the top and the bottom, with no scrolling enabled in the window.

Can anybody suggest a way for me to do this?


#3

I believe background-position: center; should help


#4

i think this can work for u
background: lightblue url(“img_tree.gif”) no-repeat fixed center;


#5

As @MarekMac and @sharmin1 sugested you need to add this 3 lines of code to your existing css for the body:

background-color: lightblue; //or any other color you like just as a fallback in case the url is broken
background-attachment: fixed;  
background-position: center;