Centering a Background Image, Using Css

Centering a background image, using CSS

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%;
}

Center a background image with css

I think you are looking for the background-position property

background-position: center;

You could also combine your background properties into one line like this:

background: url('.../imagens/fundoheader.png') no-repeat center;

Centering a background image inside a div

Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.

background: url("images/background.png") no-repeat 50% 18.5%;

Could solve your problem and place the image in the center of you div

How to always display center of background image?

What you need to do is two things:

Add background-position: center; to position the image in the center, and to cover as much as possible from the actual image in the actual space, you can use background-size: cover;.

In CSS:

.py-5 {
    background-position: center;
    background-size: cover;
}

How to center a (background) image within a div?

#doit {
    background: url(url) no-repeat center;
}

---

Related Topics