0

Details : Using Atom File Editor with Mac OS X, Making a new site on localhost and after saving it I check changes on chrome browser. Right now i have come across a problem which causes the image to not show up on the website while i was trying to set background image of a section tag in CSS.

Problem : I am trying to use the stellar.js parallax plugin and for that i need to set the background property of the section tag to an image of my choice. The problem is that when i use "background : url(parallax1.png);" the image does not show up on the website and only a white blank space is shown.

HTML File : 

<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->

CSS File :

.pic1
{
  background : url(parallax1.png);
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

Points You Should Know :

  • the image parallax1.png is in the same directory and i have checked the spelling, which is correct.
  • I have also tried using background-image: instead of background: .
  • If i use < img src="parallax.png" /> the image shows up perfectly
  • i have tried to encase parallax.png in '' as well as "".

Any help would be appreciated, Thanks.

programmingandroid
  • 340
  • 1
  • 5
  • 14
  • Should .parallaxcontent be .parallax1 to match your class name? – Drakes May 11 '16 at 17:49
  • you may want to change your CSS properties to `.pic1{background-image:url("parallax1.png");}` , assuming that the image (parallax1.png) is stored in the root directory. – jbutler483 May 11 '16 at 17:53
  • what settings are in that `.parallax1` class which is also applied to that element? Maybe they override the `.pic1` class? – Johannes May 11 '16 at 18:24

3 Answers3

2

Generally, you should have some content within the section tag or you can set in .pic1 class

min-height:200px;
Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
0

Try background : url("parallax1.png");

Read more here CSS background Property

hhaiit
  • 63
  • 1
  • 5
0

take a look

html

<section class="parallax1 pic1">
</section>

css

.pic1
{
  background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
  width: 100px;
  height: 32px;
  border:1px solid #000;
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

working Fiddle

yanntinoco
  • 152
  • 7