Section background image not showing up

Question

I have a section set up like this:

<section id="fullpage">

</section>

html, body {
    height:100%;
    margin:0;
}

#fullpage { 
    background-image: url("sakura.png");
}

I have the sakura.png in the root directory but the image does not show up, I only see a white screen, what could be the problem?

Edit: I had to remove the quotes from background-image: url("sakura.png");

Yes it is in the same folder, background-color does work but images keep failing — Missy, Oct 21 '17 at 09:12
Do you have file "sakura.png" in the same directory, as the file with this code section? — Stepan Novikov, Oct 21 '17 at 09:14
Your question is looks like duplicate of - https://stackoverflow.com/questions/21374534/css-background-image-not-loading. Please check answers there, I think that removing quotes can help — Stepan Novikov, Oct 21 '17 at 09:19
Possible duplicate of [CSS Background image not loading](https://stackoverflow.com/questions/21374534/css-background-image-not-loading) — Stepan Novikov, Oct 21 '17 at 09:19

VXp · Answer 1 · 2018-09-03T21:15:13.240

1

Try this:

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}

#fullpage {
  height: 100%;
  background-image: url('sakura.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

<section id="fullpage"></section>

Also works like this:

#fullpage {height: 100vh}
html, body {width: 100vw; height: 100vh} and #fullpage {height: 100%}

edited Sep 03 '18 at 21:15

answered Oct 21 '17 at 09:17

VXp

11,598
6
31
46

score 0 · Answer 2 · answered Oct 21 '17 at 09:08

0

Try giving a height to section.

#fullpage { 
     height: 100px;
     background-image: url("sakura.png");
}

answered Oct 21 '17 at 09:08

Shubham Agrawal

417
3
11

This didn't work for me :/ background-color does work but I images keep failing – Missy Oct 21 '17 at 09:10
This should work as it does for me, is this css written in a external file, and is there a console error for you? – Shubham Agrawal Oct 21 '17 at 09:14

score 0 · Answer 3 · answered Oct 21 '17 at 09:23

0

you need to add a width property to your #fullpage

#fullpage { 
     width:100px;
     height: 100px;
     background-image: url("sakura.png");
}

answered Oct 21 '17 at 09:23

Yaroslav Cherednikov

77
7

score -1 · Answer 4 · answered Oct 21 '17 at 09:15

-1

Try adding / to the url like so:

#fullpage { 
    background-image: url("/sakura.png");
}

Also try adding a height/width to your section.

answered Oct 21 '17 at 09:15

Στέφανος Παναγιωτίδης

56
6

Section background image not showing up

4 Answers4