Can't put an image as background on css

Question

I've been trying to put an image as background, but for some reason, it doesn't work.

Below you will find my HTML and CSS. The name of the image is Background and its size is 1280*720.

The HTML:

<!DOCTYPE html>
    <html>
      <head>
              <title></title>
              <link rel="stylesheet" type="text/css" href="test.css">


        </head>
        <body >

            <header>

            </header>






            <footer></footer> 

        </body>      

    </html>

The CSS:

body {
background: url("C:\Users\pro tech\Desktop\site web\Nouveau dossier: background.jpeg") no-repeat;

background-size: cover;
}

The URL of the image looks very wrong; can you show the file structure for your project? — MattHamer5, Oct 16 '19 at 14:16
@Deepak I've tried to do it on a body with more content but still the same problem — Bouhaic Omar, Oct 16 '19 at 14:33

score 2 · Answer 1 · answered Oct 16 '19 at 14:21

2

The image url should be relative to your css file and not your desktop. Or in your case relative to the html file because you have inline css.

The url is way off.

It should be something like...

background: url("/images/background.jpeg")

answered Oct 16 '19 at 14:21

zanderGcu

31
5

score 1 · Answer 2 · answered Oct 16 '19 at 14:25

The url of the background image needs to begin where that CSS file is located. If you need to go back a folder, you use ../, which leads me to my next thing: make sure you are using forward slashes and not back slashes.

Example: If you have your CSS file on your desktop right now, your path would look like this: url("site%20web/Nouveau%20dossier/background.jpeg");

score 0 · Answer 3 · answered Oct 16 '19 at 14:27

maybe because there is blank space on the url link? try to replace the blank url with %20

body {
background: url("C:\Users\pro%20tech\Desktop\site%20web\Nouveau dossier\background.jpeg") no-repeat;

background-size: cover;
}

or just remove the detail URL, and just use image file name if the image is in the same folder as html and css

body {
background: url("background.jpeg") no-repeat;

background-size: cover;
}

score 0 · Answer 4 · answered Oct 16 '19 at 15:10

0

Put the image in the same folder where you have your index and Css and then add the css with the new location of the file:

for exemple:

body {
background : URL("./image.jpeg") no-repeat;
}

answered Oct 16 '19 at 15:10

cosette

33
7

score -1 · Answer 5 · answered Oct 16 '19 at 14:17

-1

You need to add some height or content to the body. for now height is 0px so background image is not showing

answered Oct 16 '19 at 14:17

Deepak

55
6

Can't put an image as background on css

5 Answers5