CODEWITHSUNDEEP
htmlcssbackgroundcss-position
BeNice
BeNice

Reputation: 97

html background image cannot display normally

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:

enter image description here

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.

Upvotes: 3

Views: 90

Answers (3)

Razia sultana
Razia sultana

Reputation: 2211

Try this:-

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

</div>

Upvotes: 0

mrid
mrid

Reputation: 5796

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>

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

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

Some suggestions:

  1. 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

  2. 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>

Upvotes: 3

Related Questions