Can anyone tell me why this image (css) isn’t loading?

Asked

Viewed 71 times

0

I’m doing an exercise here, but I’m not able to load the image img/baladinha.jpg. Note: I haven’t put images on the body

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     
<head> 
    <title> JavaScript CinemaBaladinha</title>  
    <style>
        div {
            margin:0 auto; width:940px; text-align:center;
        }

        #topo {
            background:url(img/baladinha.jpg) no-repeat;   
        }
    </style>

    <script type = "text/javascript" src = "js/CinemaBaladinha.js"> </script> 
</head>    
    <body>    
        <div id = "topo"/> 
        <div>
            <img />
            <img />
            <img />
        </div>  
    </body>
</html>
javascript css

1 answer

2

To div is not an element that can be closed in on itself. Therefore,

<div id = "topo"/>

is wrong.

The correct is 

<div id="topo"></div>

Moreover, the div does not have defined height. By default, a block element (which is the case of this) has 100% of width and height: auto, what is leaving your div#topo with a height of zero.

What would solve:

#topo{
    background: (img/baladinha.jpg);
    height: 200px;
}

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.