Want to position the background image in the middle

html css position background-image css-position

44,182

Solution 1

may be you have write like this :

background-position: center center;

EDIT:

may be there problem with the body because it not takes screen entire height so if you want an image show in the center of the screen then write

html,body{height:100%;}
body{
    background:url(http://www.poster.net/van-gogh-vincent/van-gogh-vincent-sternennacht-2601013.jpg) no-repeat fixed center center;
}

check the example http://jsfiddle.net/sandeep/m2fZs/2/

Solution 2

Instead of continuing to post comments, I thought it might be smarter to create a new answer.

Would something like this demo work for you? (replace 'fixed' with 'scroll' , if you want the img to scroll up and down with the page)

44,182

Author by

Shehzad009

Updated on July 09, 2022

Comments

Shehzad009 almost 2 years
Hello on my login page I have a background image. Currently the image is centered but not centered the way I want it. I want it so the image is always centered in the middle of the screen. Curently, my image is centered but is positioned at the top of the page. The image need to be positioned in the middle of the screen, and kept centered.
```
login.html
 <body style="background-image: url({{MEDIA_URL}}/admin_media/img/admin/bigstock_Photo_Showing_Financial_Growth_1339836.jpg); background-position: 50% 50%; background-repeat:no-repeat;">
```
Shehzad009 over 12 years

@sandeep Nope, looks like it still does the same thing. (centered but positioned at the top of the page)
r0skar over 12 years

@Shehzad009: Would this maybe help you: css-tricks.com/3458-perfect-full-page-background-image ?
Shehzad009 over 12 years

@Andrej: No I do not want my image to be streched. I just want this background image to be positioned in the center of the screen. Currently it is centerd at the top of the screen. I want it centered for both vertically and horizontally
sandeep over 12 years

@Shehzad009: check my latest example may be that's you want