background-image: url not working properly

Question

The problem I am encountering is that when I use javascript to get the html file inside another html file, the background image turns invisible. But when I open the file with the background image the image is visible.

To make this understandable, I want to include second.html (with background image) in first.html using javascript without the image being invisible.

First.html (main)

<html>
    <head>
        <script> 
            $(function(){
                $("#second").load("second.html");
            });
        </script> 
    </head>
    <body>
        <div id="second"></div>
    </body>
</html>

Second.html (with image)

<body style="background-image: url('img/dashboard-layout.png'); background-repeat: no-repeat; background-color: #303032;">
    <!--Code goes here-->
</body>

This sounds a lot like the same issue: http://stackoverflow.com/questions/5271316/jquery-load-body-from-external-html — Evan Knowles, Apr 29 '15 at 05:53
Not sure that loading `body` tag into another document is a good idea regardless — Jon G Stødle, Apr 29 '15 at 05:58
@Guru, the strange thing is when I change the to
the background turns invisible... — Dler Hasan, Apr 29 '15 at 06:07
why don't you load your second html in `iframe` instead of div?? — Guruprasad J Rao, Apr 29 '15 at 06:19
yes Iframe is good solution. If you used div then you need to set height for both divs. container and in second.html file see my ans below. — Guru, Apr 29 '15 at 06:23

Guru · Accepted Answer · 2015-04-29T07:27:12.240

This is my working example first.html

<html>
  <head>

    <script> 
       $(function(){
            $("#second").load("second.html");
        });
    </script> 
   </head>
   <body>
      <div id="second" style="height:100px;width:100%;"></div>
   </body>

second.html

<div style="height:100px;width:100%;background-image: url('http://blogs.atlassian.com/wp-content/uploads/01-new-icons.png'); background-color: #303032;">

Note that div has default height = 0px you need to set height for divs to work this eg.

background-image: url not working properly

1 Answers1