CSS: background-image: is not displaying my image (First time making a website and first time using stack overflow)

Question

As the title says Im really new and I was watching a youtube tutorial but my background-image doesnt display anything. The code is really symple and the url path is correct. Im not sure whats going on. Any suggestions?

/* home-info
========================== */

.home-info {
    background: url(C:\Users\XXXXX\Desktop\Programs\Websites\MyLife\images\aes.jpg);
    /* background-color: rgb(118, 182, 141); */
    padding: 10em 0;
    background-size: cover; 
}

this part of the code that is set to be a comment works fine.

/* background-color: rgb(118, 182, 141); */

I have tried putting ("..\aes.jpg"); and ('..\aes.jpg'); and it still doesnt work. Could it be the image resolution it self (its 2048x1442)?

Also here is a part of my html code that has some meta inside

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>My Life</title>
    <link href="styles.css" rel="stylesheet" type="text/css">

As far as I know that should allow the website to be resised without it looking weird and that also works.

Any suggestions are really appreciated. Thank you!

This helps to [add both image and color together](https://stackoverflow.com/questions/903659/why-cant-i-use-background-image-and-color-together) — Rayees AC, Sep 12 '20 at 13:49
Your `background-image` path should be relative your file. Try checking out the path under Network tab of your dev tools or even can see the path error in your windows' console. — Himanshu Aggarwal, Sep 12 '20 at 14:49

score 1 · Accepted Answer · answered Sep 12 '20 at 13:47

1

You shouldn't use the absolute path that's related to your computer, because it wont work elsewhere!

I think the problem comes from the use of \ in your paths. Try replacing them by '/'. I don't know exactly about your folders architecture but try something like this : images/aes.jpg

answered Sep 12 '20 at 13:47

ArnaudV

342
2
9

Wow thank you. This worked. I have a question if you dont mind answering. Since I have a folder named "Websites" and inside i have multiple folders for different test websites named like "MyLife" and "Ariies" (Ariies folder has a empty index.html and a empty folder named images, while MyLife has my html code, folder also named images and styles.css) How does my css code know which images folder i want to use if my path is only set to images/aes.jpg. Does it search trough multiple images folder until it finds aes.jpg? Or does it search for the nearest one if that makes sense. Anyway thanks :D – Ariies Sep 12 '20 at 14:02
When you are targeting 'images/aes.jpg', you are using a relative path. It is relative to the file in which style.css is open. So, when you open your `index.html` in `C:\Users\XXXXX\Desktop\Programs\Websites\MyLife`, the relative path directly targets `C:\Users\XXXXX\Desktop\Programs\Websites\MyLife\images\aes.jpg` – ArnaudV Sep 12 '20 at 14:07

Ghassen_Eljday · Answer 2 · 2021-03-29T14:35:42.380

0

You can not put the URL image like that all you have yo do is calling it from the folder that you have

 .home-info {
    // this is the right command to implement a background img.
        background-image: url("images\aes.jpg");

        padding: 10em 0;
        background-size: cover; 
    }

edited Mar 29 '21 at 14:35

answered Sep 12 '20 at 14:01

Ghassen_Eljday

38
5

Hey, I tried background-image first but then I tried a lot of different solutions that I could find online. Sorry for the confusion but the comment above by ArnaudV worked. Seems it was a problem with my url path after all. Thank you for the reply anyway :D – Ariies Sep 12 '20 at 14:05

score 0 · Answer 3 · answered Sep 12 '20 at 14:14

0

The below code would work..

background-image:url("images/aes.jpg");

answered Sep 12 '20 at 14:14

Shehryar Tanoli

393
2
4
17

CSS: background-image: is not displaying my image (First time making a website and first time using stack overflow)

3 Answers3