Background image in DIV not displaying

creative_eye · October 30th, 2009, 12:48 AM

I've a image which I need to show as background in a DIV. Here is the code:

CSS:
#inner_banner { background:url(images/inner-banner.jpg) no-repat; height:200px; display:block; width:950px; float:left; }

HTML:
<div id="inner_banner">some text here</div>

But this code doesn't showing the background image (in all browsers), only blank space. What I'm doing wrong?

om_prakash · October 30th, 2009, 07:38 AM

Change:

Code:

<div id="inner_banner">some text here</div>

to

Code:

<div class="inner_banner">some text here</div>

Please check this link for more example:
http://www.hscripts.com/tutorials/css/backp4.php

Imar · October 30th, 2009, 09:04 AM

Hi om_prakash,

I don't see how that would fix the problem. Take a look at the selector:

#inner_banner

It's an ID selector and thus you need the id=, not class=

The problem is with the no-repat. Change that to no-repeat and it should work...

Cheers,

Imar

chroniclemaster1 · December 31st, 2009, 04:05 PM

Quote:

Originally Posted by om_prakash

Change:

Code:

<div id="inner_banner">some text here</div>

to

Code:

<div class="inner_banner">some text here</div>

Imar hit the solution on the head. More generally, if you have an id="myId" the CSS syntax is...

Code:

#myId {
...style declarations...
}

If you have a class="myClass" the syntax uses a period...

Code:

.myClass {
...style declarations...
}

I'd say depending on the stylesheet that 30-50% of my style rules redefine tag styles, 40-60% style IDs, and the 10-30% redefine classes. These are workhorses of CSS. :)