How to let background image cover full viewport screen?

Question

I am new to HTML/CSS and I am having trouble making the background image of my div cover the full screen. I have used background-size:cover but it still has large margins on the left and right of the screen.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta viewport="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
        </div>
    </body>
<html>

CSS

.container{
    height:100vh;
    width:100vw;
    background-image:url("city.jpeg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    opacity: 0.8;
}

That made my image smaller and now there are top and bottom margins — chibiw3n, Jul 01 '20 at 02:06
@chibiw3n What is the size of your image? if the ratio is different than your monitor it will likely showing gap — Seno, Jul 01 '20 at 02:13
the class .container is defined in the bootstrap css and it has padding. Maybe try using another class name. — Blomqen, Jul 01 '20 at 02:20
Follow this tutorial https://css-tricks.com/perfect-full-page-background-image/ — Momin, Jul 01 '20 at 02:21
Does this answer your question? [Full-screen responsive background image](https://stackoverflow.com/questions/16548338/full-screen-responsive-background-image) — Momin, Jul 01 '20 at 02:24

score 0 · Answer 1 · answered Jul 01 '20 at 02:13

Please try using img: {width: 100% height:100%}. Your best approach would be to inspect the element and check if the div that contains the image is restricitng its size or not. You can use firefox to inspect (I just prefer it over chrome as it shows the size of any element better visually).

score 0 · Answer 2 · answered Jul 01 '20 at 03:06

0

By default, the body has a margin around it. Try this:

body {
  margin: 0;
}

answered Jul 01 '20 at 03:06

Anna Azzam

252
2
7

score 0 · Answer 3 · answered Jul 11 '22 at 05:12

0

Use following code:

.background-image {
    width: 100vw;
    height: 100vh;
}

answered Jul 11 '22 at 05:12

Kourosh

91
7

How to let background image cover full viewport screen?

3 Answers3