cannot add background image css

Question

I followed this tutorial:

https://www.youtube.com/watch?v=on7p8oqfv80

I cannot seem to add background image to a class. This image link does work, I have opened in browser and I have also previously added it using "img src=", directly into the html. It works.

I know the stylesheet is being linked properly, because the style of the text changes.

I have tried adding a width, using single quotes instead of double quotes, tried using background-image instead of background. I have tried using a local image and yes I am on Linux and yes I have chmod 777 on all files in that directory, just to be sure. I have tried all of the different solutions offered across these following links:

Cannot add background image to my <div>

How to add background image in css?

Cannot add background image to my <div>

Tried this on Firefox, Chrome and IE across Linux, Windows and Mac.

Here is the code

var errorCallback = function(e) {
  console.log('Reeeeejected!', e);
};

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia(

    {
      audio: true,
      video: true
    },

    function(stream)

    {
      video.src = window.URL.createObjectURL(stream)
    },

    errorCallback);
} else {
  video.src = 'somevideo.webm';
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

h1 {
  text-align: center;
  font-size: 575%;
  color: #4A4444;
  text-transform: uppercase;
  letter-spacing: 1%;
  margin: 45% 0;
}

h2 {
  text-align: center;
  font-size: 275%;
  color: #E5E5E5;
  text-transform: uppercase;
  letter-spacing: 1
}


}

/*---Start Parallex---*/
.parallax {
  float: left;
  border: 5px groove;
  margin-left: 70px;
  width: 100px;
  height: 100px;
  background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
  */ background-size: 100% 100%;
  width: auto;
}
.parallax-inner {
  padding-top: 50%;
  padding-bottom: 50%;
}

<h1> Space </h1>
<section class="parallex">
  <div class="parallex-inner">
    <h2>Space</h2>
  </div>
</section>
<h1>Space</h1>

score 1 · Accepted Answer · answered May 07 '17 at 11:49

It's a typo issues like in your style sheet you are designing parallax but when you added the class to the section you added parallex correct your style sheet and it will work:

*{

  margin: 0;
  padding: 0;
  border: 0;

}

h1 {

  text-align: center;
  font-size: 575%;
  color: #4A4444;
  text-transform: uppercase;
  letter-spacing: 1%;
  margin: 45% 0;
}

h2 {

  text-align: center;
  font-size: 275%;
  color: #E5E5E5;
  text-transform: uppercase;
  letter-spacing: 1
}

.parallex {
  float: left;
  border: 5px groove;
  margin-left: 70px;
  width: 100px;
  height: 100px;
  background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
  background-size: 100% 100%;
  width: auto;
}


.parallex-inner {
    padding-top: 50%;
    padding-bottom: 50%;

}

score 0 · Answer 2 · answered May 07 '17 at 11:52

*{

margin: 0;
padding: 0;
border: 0;

}

h1 {

text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;

}

h2 {

    text-align: center;
    font-size: 275%;
    color: #E5E5E5;
    text-transform: uppercase;
    letter-spacing: 1
  }



/*---Start Parallex---*/

.parallex{

float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;

background: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: 100%;

}


.parallax-inner{
    padding-top: 50%;
    padding-bottom: 50%;

}

<body>

        <h1> Space </h1>


    <section class="parallex">

        <div class="parallex-inner">

            <h2>Space</h2>

        </div>

    </section>


        <h1>Space</h1>

</body>

I fond some spelling errors and syntax errors.

Hope this will help you abit on the way!

thank you for that. Yes it was indeed a silly type. Also that I was debugging from a local machine instead of localhost so the changes I made had no effect. I think that caching may have been my downfall there. — , May 07 '17 at 13:30

hans-könig · Answer 3 · 2017-05-07T12:06:52.773

0

I tried your code using a local image file and found that the background image display but when it is passed directly(either to section or div)

<section style="background-image: url('049.JPG');" class="parallex">

    <div class="parallex-inner">

        <h2>Space</h2>

    </div>

</section>

I have to add that using the correct classes as suggested here already and removing */(surely a bug) after your background-image declaration returned me no positive result...apart from when I tried directly

edited May 07 '17 at 12:06

answered May 07 '17 at 11:56

hans-könig

553
8
10

yeh that worked for me as well, which is why i found it so weird. It was a typo. thanks for you input :) – May 07 '17 at 13:29

cannot add background image css

3 Answers3