Background-image in a div?

HTML & CSS
1

Hi,

I created a div with a background-image, it’s working :
http://imageshack.us/photo/my-images/138/divh.jpg/

but when I put a ul inside that div the background-image is invisible


* {	margin:0;	padding: 0;	outline: none;	border: none;	color:#fff;}body {	font-size: 12px;	line-height: 20px;	background: #111;	padding: 30px 0;	text-align: center;	font-family: Arial, Verdana, Sans-serif;}#wrapper {	width: 600px;	margin: 0 auto;	text-align: left;}#chart,#form_values {	width:559px;}#chart {	list-style: none;	border-left: solid 1px #666;	border-bottom: solid 1px #666;	margin-bottom:20px;}#chart li,#chart li span {	height:20px;}#chart li .percent {	width: 30px;	position: absolute;	top: 0;	right: -40px;	text-align: right;}#chart li {	position: relative;	display: block;	width: 554px;	margin: 0 0 20px 5px;	text-align: left;}#chart li .bar {	width:0;}

.orange .bar {	background: orange;}
.field {	padding: 3px;	width: 50px;	border: solid 1px #000;	float: left;	margin-right: 5px;	color: #333;}
div#bg1 {    position: absolute;    top: 250px; left: 350px;    width: 230px;    background-image: url("bg_port.png");        height:110px;    }



<!DOCTYPE HTML><html lang="en"><head>	<meta charset="utf-8" />	<title>Dynamic Bar Chart with jQuery and CSS</title>	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />	<link href="./css/core2.css" rel="stylesheet" type="text/css" />	<!--[if lt IE 9]>	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	<![endif]--></head><body>
      
     <div id="bg1" >	<ul id="chart">		<li title="25" class="orange">			<span class="bar"></span>			<span class="percent"></span>		</li>		<li title="80" class="orange">			<span class="bar"></span>			<span class="percent"></span>		</li>			</ul>	</div>		



<script src="./js/jquery-1.6.2.min.js" type="text/javascript"></script><script src="./js/core.js" type="text/javascript"></script></body></html>
2

Here’s the problem. You’re UL w/ id of “chart” has a width of 599px, while your div w/ id of “bg1” has a width of 250px. Because of your invalid widths, the ul is filling the div (in essence, stretching the div) and therefore covering up the background image.

A fix would be to:
A) Make the ul smaller (inside of 250px)
B) Make the div bigger (600px+)

~TehYoyo

3

Can you link to a live version of your page, or give us the full code (HTML and CSS)? Using just the code you’ve given above, I get a blue background showing through behind the ul, so there must be something else going on.

As TehYoyo says, your ul is wider than the div, so the background does not extend the full width of the ul.

4

Hi,
I changed the widths, but still see all the background black :

* {
	margin:0;
	padding: 0;
	outline: none;
	border: none;
	color:#fff;
}
body {
	font-size: 12px;
	line-height: 20px;
	background: #111;
	padding: 30px 0;
	text-align: center;
	font-family: Arial, Verdana, Sans-serif;
}
#wrapper {
	width: 290px;
	margin: 0 auto;
	text-align: left;
}
#chart,#form_values {
	width:280px;
}
#chart {
	list-style: none;
	border-left: solid 1px #666;
	border-bottom: solid 1px #666;
	margin-bottom:20px;
}
#chart li,#chart li span {
	height:20px;
}
#chart li .percent {
	width: 30px;
	position: absolute;
	top: 0;
	right: -40px;
	text-align: right;
}
#chart li {
	position: relative;
	display: block;
	width: 240px;
	margin: 0 0 20px 5px;
	text-align: left;
}
#chart li .bar {
	width:0;
}




.orange .bar {
	background: orange;
}


.field {
	padding: 3px;
	width: 50px;
	border: solid 1px #000;
	float: left;
	margin-right: 5px;
	color: #333;
}


div#bg1 {
    position: absolute;
    top: 250px; left: 350px;
    width: 600px;
    background-image: url("bg_port.png")  no-repeat;
    height:10px;
    }
	
	
}
5

As I said before, we really need to see the whole thing. Even with the div set to 250px, it was showing up on my test case. You have ids and classes in your CSS that don’t appear anywhere in the HTML you gave us. If you have more HTML on the page you’re using, then we need to see it, to see if there’s any conflict. That’s why I asked for the whole of your HTML and CSS.

It’s also possible that there’s something in the JavaScript causing the problem. If you can’t link to a live page - by far the best option - you need to provide all the relevant code.

6

Thank you TechnoBear,
The css code I gave above is everything, here is the HTML :

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Dynamic Bar Chart with jQuery and CSS</title>
	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />
	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />
	<link href="./css/core2.css" rel="stylesheet" type="text/css" />
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
     <div id="bg1" >
	<ul id="chart">
	     <h5> Space 150 </h5>
		<li title="25" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<h5> Space 150ccccccccccc </h5>
		<li title="80" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>		
	</ul>
	</div>
	
<script src="./js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="./js/core.js" type="text/javascript"></script>
</body>
</html>
7

In the second version you posted of the CSS, you have this:

div#bg1 {
    position: absolute;
    top: 250px; left: 350px;
    width: 600px;
    background-image: url("bg_port.png")  no-repeat;    
    height:10px;
    }

By removing the height: 10px, I can again get the div to extend behind the ul.

Which browser(s) are you seeing the problem in?

8

I am using both Firefox and Chrome, it’s very strange, I can’t see the background image at all.

9

I’m using Firefox and Chromium (on Linux). I don’t have your background image, so I’ve substituted background-color: #CEF. Try that instead. Are you quite certain there is no styling associated with your JavaScript that could be conflicting?

10

Are you sure the image URL is the correct one? From what I’ve seen, it should be inside the CSS folder root. The same folder as your CSS styles.

I know you say you just transferred it over but…Go into firebug and check out if the image is found on the element. Or Chrome inspector.

11

From Chrome inspector I got this :

In the background-image: url(“…/images/bg_port.png”) no-repeat; there is a warning error : Invalid property value.

12

Well, that’s showing that it’s not loading the background image. So first thing to check, as Ryan said, is whether that image is in the correct place. i.e. inside your css folder.

13

Thanks lot for your helps, I am new to css design, I think I have to read more, here is what I got so far :

and here is what I am trying to reach :

My code :

* {
	margin:0;
	padding: 0;
	outline: none;
	border: none;
	color:#fff;
}
body {
	font-size: 12px;
	line-height: 20px;
	background: #114;
	padding: 30px 0;
	text-align: center;
	font-family: Arial, Verdana, Sans-serif;
}
#wrapper {
	width: 290px;
	margin: 0 auto;
	text-align: left;
}
#chart,#form_values {
	width:280px;
}
#chart {
	list-style: none;
	border-left: solid 1px #666;
	border-bottom: solid 1px #666;
	margin-bottom:12px;
}
#chart li,#chart li span {
	height:16px;
}
#chart li .percent {
	width: 30px;
	position: absolute;
	top: 0;
	right: -40px;
	text-align: right;
}
#chart li {
	position: relative;
	display: block;
	width: 240px;
	margin: 0 0 8px 18px;
	text-align: left;
}
#chart li .bar {
	width:0;
}




.orange .bar {
	background: orange;
}


.field {
	padding: 3px;
	width: 50px;
	border: solid 1px #000;
	float: left;
	margin-right: 5px;
	color: #333;
}


div#bg1 {
margin-top: 20px;
    position: absolute;
    top: 250px; left: 350px;
    width: 300px;
     background-image: url("../images/bg_port.png")  ;
    height:116px;
    }
	
h5{
font-size: 13px;
color: #005ca6;
font-weight: Regular;
font-family: Calibri;
text-align: left;
margin-left: 18px;
}	




h4{
font-size: 13px;
color: #464749;
font-weight: bold;
font-family: Calibri;
text-align: right;
margin: 0px;
}	


<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Dynamic Bar Chart with jQuery and CSS</title>
	<meta name="description" content="Dynamic Bar Chart with jQuery and CSS" />
	<meta name="keywords" content="Dynamic Bar Chart with jQuery and CSS" />
	<link href="./css/core2.css" rel="stylesheet" type="text/css" />
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>


     <div id="bg1">
	<ul id="chart">
	     <h5> Space 150 </h5>
		 <h4> $2.9Mn </h4>
		<li title="25" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>
		<h5> Space 150ccccccccccc </h5>
		<h4> $1.0Mn </h4>
		<li title="80" class="orange">
			<span class="bar"></span>
			<span class="percent"></span>
		</li>		
	</ul>
	</div>


	
<script src="./js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="./js/core2.js" type="text/javascript"></script>
</body>
</html>
14

OK - as far as I can see from that, you’ve now located your background image but it’s not extending far enough down, is that right? Try removing height:116px from div#bg1. (As a rule of thumb, it’s best not to set heights on most elements, if you can avoid it. An obvious exception is images.)

[ot]If you wrap your code examples in [noparse]

[/noparse] tags in future, it will make life easier all round. :slight_smile: You can also choose the “Go advanced” option, and use the # button to add the tags, or choose from the syntax dropdown menu.[/ot]

15

When I [COLOR=#464646][FONT=Helvetica Neue]removed height:116px from div#bg1, I got this :

  1. I want to put the two bars and the text inside the background created from the image [/FONT][/COLOR]bg_port.png that has the size 4X117

  2. another problem here is the space between the title of each bar, how to take it off ?

thanks

[COLOR=#464646][FONT=Helvetica Neue]

[/FONT][/COLOR]

16

You have several problems here. Firstly, you shouldn’t have headings inside a <ul> - it’s not valid. Secondly, you have line-height: 20px; set on <body>. There are six lines of text inside your ul, so that’s 6x20 = 120px.

It’s getting late here and I need my beauty sleep. :slight_smile: I’ll check back in the morning and see what progress you’ve made.

17

I’m still not very sure what you’re trying to achieve here, but it looks as if what you’re displaying is pretty much tabular data. In that case, the easier way to display it would be to use a table.

<div id="bg1">
	<table>
	     <tr><td>Space 150<br><span class="bar"></span></td><td>$2.9Mn<br><span class="percent"></span></td></tr>
		<tr><td>Space 150ccccccccccc<br><span class="bar"></span></td><td>$1.0Mn<br><span class="percent"></span></td></tr>
	</table>	
		</div>

* {
	margin:0;
	padding: 0;
	outline: none;
	border: none;
	
}
body {
	font-size: 12px;
	line-height: 20px;
	background: #114;
	padding: 30px 0;
	text-align: center;
	font-family: Arial, Verdana, Sans-serif;
	color:#fff;
}

table {width: 300px;
 	background-image: url(background.jpg);
 	color: #333;
 	text-align: left;
 	height: 117px;
 }


.bar {
	background: orange;
}

div#bg1 {
margin-top: 20px;
    position: absolute;
    top: 250px; left: 350px;
}

gives the following result (with apologies for the first background-image that came to hand :slight_smile: )

Note that I moved color: fff from * to body.