Background URL, only one images works

Question

I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.

https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s

My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.

<p class="location"></p>

<div class="container">
    <div class="face_body">
        <div class="face">
            <div class="eye_pan">
                <div class="pan_area">

                        <div class="eye eye_l">
                            <div class="eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

and my css

    html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(images/face1.1.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(images/eyes.png);
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}

any reasons on why my eyes.png are not showing would be great. Thanks.

Check the obvious. Are the spellings the same in your code and file? Is the eyes png in the expected location. Use browser developer tools (F12) and their network tab to see if the resource is located. Then inspect the "eye" elements using the element inspection tool to see what styles are applied. — Jon P, Jul 23 '18 at 05:41

score 0 · Answer 1 · answered Jul 23 '18 at 05:51

Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.

Try inserting background-size: cover; or set it a background-size if the images is loding fine.

html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
  background-size:cover;
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}

<p class="location"></p>

<div class="container">
    <div class="face_body">
        <div class="face">
            <div class="eye_pan">
                <div class="pan_area">

                        <div class="eye eye_l">
                            <div class="eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

Oke Tega · Answer 2 · 2018-07-23T06:34:16.843

0

Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.

Try clearing your browser cache just incase your browser did not load new files

edited Jul 23 '18 at 06:34

answered Jul 23 '18 at 05:53

Oke Tega

850
10
21

Quotes are not mandatory - incorrect - for the url in this case. https://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – Lain Jul 23 '18 at 06:03

score 0 · Answer 3 · answered Jul 23 '18 at 12:13

0

Apply correct CSS syntax for background property and check whether your image path is correct or not.

background: url('images/eyes.png');

Try this and let me know if problem is still raised.

Have a nice day, Cheers !!!

answered Jul 23 '18 at 12:13

VSM

1,765
8
18

I actually had the same issue with my first image background because of the image path not starting from where my CSS file was. So after i fixed that my face.png finally appeared. Since my eyes.png and face.png are in the same folder I don't understand why it wouldn't show, the syntax is correct i believe. Even with and without quotations. – spotTop Jul 23 '18 at 14:52
Hi, can you inspect on the browser and check your eye.png loads there correctly. from that you can confirm that your image path correct or not. check and put me a message. – VSM Jul 24 '18 at 11:30

Background URL, only one images works

3 Answers3