CSS – Centering an image

So I have an image which is acting as a background and it ‘scales to fill’ the frame which is just how I want it, but the image is not centered and thus when the window is smaller like on a phone, the image displayed is just the edge. Here is the code I was using:

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


Source: html

Leave a Reply