Can anyone tell me why they are not loading this image (css)?

0

I'm doing an exercise here, but I'm not able to load the img/baladinha.jpg image. Note: I have not yet uploaded images to 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>
    
asked by anonymous 05.04.2016 / 20:24

1 answer

2

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

<div id = "topo"/>

is wrong.

The correct one is

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

What's more, the div has no set height. By default, a block element (which is the case) has 100% of width and height: auto , which is leaving its div#topo height equal to zero.

What would solve:

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