Clever Geek Handbook

CSS - centering the image

So, I have an image that works as a background, and it "scales to fill" the frame, which is exactly how I want it, but the image is not centered, and so when the window is smaller, like on a phone, the displayed image is it's just the edge. Here is the code I used:

Html

<div class="Background">
<div>

CSS

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
}

If anyone could give me some hints then that would be great. Thanks to

+3


source to share


4 answers


css code



.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
}
-1


source


Try this: 100% working.



.Background {
    display: block;
    margin: 0px auto;
    width: 100%;
    height: 100%;

    background-size: cover;
     background : rgba(0, 0, 0, 0) url("background.png") no-repeat scroll center top;
}
0


source


It would be helpful to include an example of the problem.

Try it.

        .Background {
        display: block;
        margin-left: auto;
margin-right:auto;
        width: 100vw;
        height: 100vh;
        background: url('background.png') no-repeat /* <- however you want the image to repeat */ center;
    }

See http://www.w3schools.com/css/css_background.asp

0


source 


background-position: center;

added to your css rule will center the background image

text-align:center

added to your div will work for all content inside, even text

-1


source






More articles:


All Articles