0

I am designing a webpage which contains a slide show. The background of the slideshow is an image which is available in the image folder. The background image does not show in the slideshow background. I tried to override the CSS file in my machine and it showed up. However, when I uploaded the content to the server, the background image did not show up. Below is the html code and the css selector:

<div style="background:url(../images/slider-bg.png)" class="slideshow">
   <div class="row">
     <div class="large-12 twelve columns">
       <section class="slider">
         <div class="flexslider">
            <ul class="slides">
                  <li><img src="images/slider/1.jpg"alt=""></li>
                  <li><img src="images/slider/2.jpg" alt=""></li>
                  <li><img src="images/slider/3.jpg" alt=""></li>
                  <li><img src="images/slider/4.jpg" alt=""></li>
                  <li><img src="images/slider/5.jpg" alt=""></li>
                  <li><img src="images/slider/6.jpg" alt=""></li>
                  <li><img src="images/slider/7.jpg" alt=""></li>
                  <li><img src="images/slider/8.jpg" alt=""></li>
                  <li><img src="images/slider/9.jpg" alt=""></li>
         </ul>
    </div>
  </section>
</div>

`

And this is the CSS code: 

 .slideshow {
          margin:0;
          background:url(../images/slider-bg.png);
   }

What is the cause of this problem and how to solve it? Thank you so much in advance!

Mohammed
  • 1,364
  • 5
  • 16
  • 32
  • 1
    is there any errors in the console ? – Adeeb basheer Feb 16 '17 at 19:41
  • 1
    On the server, does your app reside in a sub-folder (not the root)? – Matt Spinks Feb 16 '17 at 19:42
  • @MattSpinks Yes, it is in a subfolder, Matt. – Mohammed Feb 16 '17 at 19:42
  • 1
    It's probably either a path or style issue. We can't say from what you've provided. – isherwood Feb 16 '17 at 19:44
  • @isherwood Can I add the full path of the image in the css file? Do you think it will solve the problem? – Mohammed Feb 16 '17 at 19:45
  • 1
    That is most likey your issue. Check your network activity in debugging tools in your browser when viewing the server site. Try to see what url is being "hit" for each image. It's probably not going to the sub-folder. – Matt Spinks Feb 16 '17 at 19:45
  • @MattSpinks I checked and the url of each image is `images/slider/` The background image resides in a folder `images/`. – Mohammed Feb 16 '17 at 19:50
  • 1
    Then it seems like it's not going to the right path. It's going to `images/slider`. But shouldn't it be going to `appFolder/images/slider`? – Matt Spinks Feb 16 '17 at 19:53
  • @isherwood I have to be careful to ask about this. I am making editing on the server and it goes live immediately. Hope this does not bother you. – Mohammed Feb 16 '17 at 19:58
  • @MattSpinks It is very likely that it goes to the `images/slider`. Let me check by adding the background image to the same folder. I will update you soon – Mohammed Feb 16 '17 at 20:00
  • 1
    If you test the full URL in the address bar and the image loads in the browser there's virtually no risk to test on your live site (which is presumably broken anyway) by placing that URL in your CSS. – isherwood Feb 16 '17 at 20:10
  • @isherwood It loads in the browser. Thank you for these valuable tips! – Mohammed Feb 16 '17 at 20:17
  • @MattSpinks I copied the image to the `images/slider` but it did not work. I will have to check my entire css file for any error. – Mohammed Feb 16 '17 at 20:25
  • @MattSpinks It was an error in the CSS file far away ahead of the slider section. I fixed it and now the background image is working properly. Thank you so much for your kind help. Your guidance has been very helpful and I appreciate it. – Mohammed Feb 16 '17 at 20:56

4 Answers4

1

  1. Delete style="background:url(../images/slider-bg.png)" in html and css file can put in different directory

  2. Check, maybe slider-bg.png has Uppercse into name (Slider-bg.png, slider-bg.PNG etc...)

grinmax
  • 1,835
  • 1
  • 10
  • 13
1

Without an example it's a bit difficult to troubleshoot, but if you're using flex slider, I'm guessing the image is hidden behind the slides. A way to test this is by setting 

<div class="flexslider" style="visibility: hidden;">

in the browser's dev tool to see that the image is in fact there.

rawnewdlz
  • 1,221
  • 1
  • 17
  • 24
  • I checked and it is not hidden. After I set the values you gave, I get clear area without any image – Mohammed Feb 16 '17 at 20:12
  • That is odd, seems like it would be a simple minor error some where then. Is it possible to create a functional example here, or a jsfiddle or codepen? I tested on the flexslider 2 demo on woopress by adding a background-image to the
    and it worked.
     – rawnewdlz Feb 16 '17 at 20:16
  • It works in the local machine. But when uploading the content to the server, it does not. That is the issue. – Mohammed Feb 16 '17 at 20:23
  • Sorry I couldn't help. Without seeing the live example it's quite difficult to troubleshoot because it could be caused by anything. – rawnewdlz Feb 16 '17 at 20:34
  • Thank you, rawnewdlz, for your guidance and help. It is now fixed. – Mohammed Feb 16 '17 at 20:58
1

It is rather hard to answer your question without the whole files and their exact location but there is a small detail that doesn't look right to me: the url in the css file is not surrounded by (double) quotes.

.slideshow {
          margin:0;
          background:url("../images/slider-bg.png");
}
C.Champagne
  • 5,381
  • 2
  • 23
  • 35
  • You don't actually need quotes when defining the background URL, unless there are "special characters". http://stackoverflow.com/a/2168861/3130549 – rawnewdlz Feb 16 '17 at 21:23
0

It was an error in the CSS file far away ahead of the slider section. I fixed it and now the background image is working properly. Thanks for all the people who interacted with this question and provided me with valuable clues to figure out the error.

Mohammed
  • 1,364
  • 5
  • 16
  • 32