CODEWITHSUNDEEP
htmlcss
Ichiban
Ichiban

Reputation: 25

Image won't show in a <div>

Here's my code

HTML: 

    <body>
        <div id="wrapper"> <!--wrap for all the page-->
            <div id="header"> <!-- div for top part-->
                    <!--<p><img src="image/bannerwithologo.jpg"></p>-->
                <div id="txtlogo"> <!-- inside header for text-->
                    <p>HANA Squad</p>
                </div>

                <div id="menu"> <!-- inside header for menu-->
                    <p href=#>Vidéos</p>
                    <p href=#>Photos</p>
                    <p href=#>Agenda</p>
                </div>
            </div>

        <div id="contenu"> <!-- contents-->
                <div id="welcoming"> <!-- short presentation of the website-->
                </div>
        </div>

</body>

CSS:

.header {background-image: url('../image/banner.jpg');
    height:500px;
    width: 500px;

Don't care about the comment in my div header, i was trying something else and didn't erase it

It is not a problem of files directory because if i put the background-image in html in the css, my image is showing up

I have tried to put different size of my div header but ... Not working

I know it's a stupid problem ..

Upvotes: 0

Views: 1030

Answers (3)

Mahesh Odedra
Mahesh Odedra

Reputation: 59

Here is your Answer

#header {background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
    height:500px;
    width: 500px;
  }
 <body>
        <div id="wrapper"> <!--wrap for all the page-->
            <div id="header"> <!-- div for top part-->
                    <!--<p><img src="image/bannerwithologo.jpg"></p>-->
                <div id="txtlogo"> <!-- inside header for text-->
                    <p>HANA Squad</p>
                </div>

                <div id="menu"> <!-- inside header for menu-->
                    <p href=#>Vidéos</p>
                    <p href=#>Photos</p>
                    <p href=#>Agenda</p>
                </div>
            </div>

        <div id="contenu"> <!-- contents-->
                <div id="welcoming"> <!-- short presentation of the website-->
                </div>
        </div>

</body>

Upvotes: 0

Joseph Woodward
Joseph Woodward

Reputation: 9281

The problem is that your header in your HTML is an id (id="header") yet your CSS is targeting a class (.header).

You need to either switch your CSS to target the id, or change your HTML to be a <div class="header"></div>. For what it's worth, it's generally accepted that for more maintainable CSS, you should favour classes over IDs. So I'd go with the latter of the two options.

Upvotes: 0

Ren&#233; H&#246;hle
Ren&#233; H&#246;hle

Reputation: 27285

<div id="header"> you use an id in your code then you have to use a # in your css for an id declaration. 

#header {background-image: url('../image/banner.jpg');
    height:500px;
    width: 500px;

for your code you have to set a class for example

<div class="header">

Upvotes: 5

Related Questions