SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question background-image in a div ??

    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>

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mlotfi View Post
    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

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
        }
     
     
    }
    Last edited by TechnoBear; Apr 11, 2012 at 10:45. Reason: Code tags added

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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. #6
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by TechnoBear; Apr 11, 2012 at 11:13. Reason: Code tags added

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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?

  8. #8
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using both Firefox and Chrome, it's very strange, I can't see the background image at all.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mlotfi View Post
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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. #13
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by TechnoBear; Apr 11, 2012 at 13:42. Reason: Code tags added

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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.

  15. #15
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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






  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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.

  17. #17
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,239
    Mentioned
    266 Post(s)
    Tagged
    5 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •