background-image in a div ??

**mlotfi** · Apr 11, 2012 06:30

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
http://imageshack.us/photo/my-images/829/divbar.jpg/

HTML Code:

* {	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;    }

HTML Code:

<!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>

**TehYoyo** · Apr 11, 2012 07:10

Originally Posted by mlotfi

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
http://imageshack.us/photo/my-images/829/divbar.jpg/

HTML Code:

* {	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;    }

HTML Code:

<!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>

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

**TechnoBear** · Apr 11, 2012 09:39

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.
mlotfi.png

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

**mlotfi** · Apr 11, 2012 10:43

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

Code CSS:

* {
	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;
    }
 
 
}

**TechnoBear** · Apr 11, 2012 10:51

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.

**mlotfi** · Apr 11, 2012 11:03

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

Code:

<!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>

**TechnoBear** · Apr 11, 2012 11:22

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

Code CSS:

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?

**mlotfi** · Apr 11, 2012 11:34

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

**TechnoBear** · Apr 11, 2012 11:44

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?

**RyanReese** · Apr 11, 2012 11:54

Originally Posted by mlotfi

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

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.

**mlotfi** · Apr 11, 2012 12:29

From Chrome inspector I got this :
http://imageshack.us/photo/my-images/571/97487403.jpg/

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

**TechnoBear** · Apr 11, 2012 12:32

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.

**mlotfi** · Apr 11, 2012 13:23

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 :
http://imageshack.us/photo/my-images/535/bar2wb.jpg/

and here is what I am trying to reach :
http://imageshack.us/photo/my-images/59/bar22w.jpg/

My code :

Code CSS:

* {
	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;
}

Code:

<!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>

**TechnoBear** · Apr 11, 2012 13:51

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.)

Off Topic:

If you wrap your code examples in [code][/code] tags in future, it will make life easier all round.

You can also choose the "Go advanced" option, and use the # button to add the tags, or choose from the syntax dropdown menu.

**mlotfi** · Apr 11, 2012 14:02

When I removed height:116px from div#bg1, I got this :
http://imageshack.us/photo/my-images/201/bar33.jpg/

1) I want to put the two bars and the text inside the background created from the image 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

**TechnoBear** · Apr 11, 2012 14:19

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.

I'll check back in the morning and see what progress you've made.

**TechnoBear** · Apr 12, 2012 11:41

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.

Code HTML4Strict:

<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>

Code CSS:

* {
	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

)
mlotfi2.png

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

User Tag List

Thread: background-image in a div ??

Thread Tools

Display

background-image in a div ??

Bookmarks

Bookmarks

Posting Permissions