I want to center a background image. There is no div used, this is the CSS style:
body{
background-position:center;
background-image:url(../images/images2.jpg) no-repeat;
}
The above CSS tiles all over and does center it, but half the image is not seen, it just kind of moves up. What I want to do is center the image. Could I adopt the image to view even on a 21" screen?
13 Answers
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
That should work.
If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.
Other than that try:
background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.
body{
background-repeat:no-repeat;
background-position: center center;
background-image:url(../images/images2.jpg);
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
min-height:100%;
}
I use this code, it works nice
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I think this is what is wanted:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Try
background-position: center center;
Like this:
background-image:url();
background-repeat:no-repeat;
background-position: center;
background-size: cover;
html{
height:100%
}
body{
background-image:url();
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}There's an error in your code. You're using a mix of full syntax and shorthand notation on the background-image property.This is causing the no-repeat to be ignored, since it's not a valid value for the background-image property.
body{
background-position:center;
background-image:url(../images/images2.jpg) no-repeat;
}
Should become one of the following:
body{
background:url(../images/images2.jpg) center center no-repeat;
}
or
body
{
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
}
EDIT: For your image 'scaling' issue, you might want to look at this question's answer.
Try this background-position: center top;
This will do the trick for you.
background-repeat:no-repeat;
background-position:center center;
Does not vertically center the background image when using a html 4.01 'STRICT' doctype.
Adding:
background-attachment: fixed;
Should fix the problem
(So Alexander is right)
simply replace
background-image:url(../images/images2.jpg) no-repeat;
with
background:url(../images/images2.jpg) center;
background-position: center center;
doesn't work for me without...
background-attachment: fixed;
using both centered my image on x and y axis
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
if your not satisfied with the answers above then use this
* {margin: 0;padding: 0;}
html
{
height: 100%;
}
body
{
background-image: url("background.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
Had the same problem. Used display and margin properties and it worked.
.background-image {
background: url('yourimage.jpg') no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
height: whateveryouwantpx;
width: whateveryouwantpx;
}
The only thing that worked for me is..
margin: 0 auto
