html background image cannot display normally

Question

I have some problems with the picture display. Below is my code：

.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  height: 100%;
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}

<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

This is how it looks like now:

If I didn't add the paragraph between the class div class = "night-sky" , it just shows nothing. but if i just add the background-image in the body it will shows correctly. I don't know what's wrong.

Thanks.

Likely because you have height in percentage, and width not defined. So unless there is an element, there is width/height for night-sky. Hence no bg visible. See a sample fiddle without paragraphs. https://jsfiddle.net/5a2xowwg/ — aVC, Nov 14 '16 at 03:02
Link:-http://www.html.am/html-codes/image-codes/background-image-code.cfm — Razia sultana, Nov 14 '16 at 05:54

score 3 · Answer 1 · edited May 23 '17 at 11:53

Add height: 100% to html and that would solve the problem.

Some suggestions:

You can see that now there would be some margin at the top - this comes due to margin collapsing (you can read more about it in this SO thread). To remove this add a border to the night-sky
Finish it up with:
```
* {
  box-sizing: border-box;
}
```
so that there is no scrollbar on the body - see why border-box is important in this SO thread

Cheers!

* {
  box-sizing: border-box;
}
html{
  height: 100%;
}
.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  
  border: 1px solid black;
  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  height: 100%;
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}

<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

mrid · Answer 2 · 2016-11-14T03:27:39.410

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

.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}

<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

score 0 · Answer 3 · answered Nov 14 '16 at 05:54

0

Try this:-

<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;">

</div>

answered Nov 14 '16 at 05:54

Razia sultana

2,168
3
15
20

If you want you can change height & width as you want. – Razia sultana Nov 14 '16 at 05:56

html background image cannot display normally

3 Answers3