First, set a background image using the background-image property. Next, set the background-repeat property to no-repeat . Then, write the fixed option for the background-attachment property. After that, apply the background-position property to the center center option and the background-size property to cover .
To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.
You can use a combination of position keywords: center , top , bottom , left and right . background-position: center center; The background image will be positioned in the center of the element.
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(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
html{
height:100%
}
body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With