CSS: How to set background image which will fit to screen?

Question

I am working on my website, I already added some images and now I want to set one background, main, which will be covered by the others, is it possible?

Entering background-image:url("myphoto.jpg") does not work for me. any ideas? Thanks!

Possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) — Douwe de Haan, May 03 '17 at 06:58
I believe the issue is caused by the CSS file being in a different folder and needing a different relative path to the image: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to — adibble, May 03 '17 at 07:26

score 1 · Answer 1 · answered May 03 '17 at 07:24

Give background class to the dive in which you want to apply background image. and give css as per below: This is how you can do:

    <div class="background"></div>

and style css would be:

.background{
background: url("myphoto.jpg") no-repeat center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}

score 0 · Answer 2 · answered May 03 '17 at 07:07

0

   body {
      background: url("myphoto.jpg") no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

answered May 03 '17 at 07:07

Hiren Sojitra

1
2

@Luigi, the image url must be relative to the CSS file. For example, if your CSS file is in a subfolder relative to the html file, you may need to change the path to something like this: url("../myphoto.jpg") – adibble May 03 '17 at 07:23

score 0 · Answer 3 · answered May 03 '17 at 08:14

@Hiren is correct, but you need to "Locate" the desired image, fx. if we say i have my www folder wich is my main folder, i have an index.html and a sub-folder called IMG, and inside there i got myphoto.jpg

then the following should be set as the url: url("img/myphoto.jpg")

body {
      background: url("https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg") no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

score 0 · Answer 4 · answered Nov 11 '20 at 16:57

  background: url("{{asset('staticImage/wallpapers/wall_num10.jpg')}}") no-repeat center center fixed !important;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

CSS: How to set background image which will fit to screen?

4 Answers4