Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Why is my background image not showing up?

    I have the css set up on my page to show a background image....bit it is not there.

    Here is the page ... on slide 1: http://billboardfamily.com/the-process/

    There is supposed to be an image...and I want it to appear at the bottom of the slide.

    html code:
    Code:
    <div id="slides">
    <div class="img1"><img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/calendar_icon.png" alt="Choose Your Day(s)" /></div>
    <div class="img2"><img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/paypal_icon.png" alt="Pay With Paypal" /></div>
    <div class="text1">
    <h3>Choose Your Day(s)</h3>
    First, decide which day, or days, you would like to purchase. Days in 2010 begin at $2 for January 1 and increase daily by $2, until December 31, which is $730. Claim your day NOW!
    
    </div>
    <div class="text2">
    <h3>Pay With PayPal™</h3>
    Next, pay via PayPal with any major credit card, a checking account, or your PayPal balance. You don’t even have to be a PayPal member! It’s safe, secure, and free!
    
    </div>
    </div>
    css
    Code:
    /** BEGIN slides **/
    
    #slides {
    	background: url(../images/slide1_bg.png) no-repeat bottom;
    }
    
    #slides .img1 {
    	float: left;
    	padding-left: 35px;			
    }
    #slides .img2 {
    	float: left;
    	padding-left: 75px;
    				
    }
    #slides .text1 {
    	float: left;
    	width: 200px;
    	padding-top: 10px;
    	padding-left: 10px;
    	padding-bottom: 10px;
    	margin-left: 30px;
    	overflow: hidden; /*contain floats*/
    	background-color: #f2f2f2;
    	font-family: Arial;
    	background: #f2f2f2;
    	-moz-border-radius: 8px;
        	-webkit-border-radius: 8px;
        	-khtml-border-radius: 8px;
    	behavior: url(/border-radius.htc);
        	border-radius: 8px;				
    }
    #slides .text1 h3 {
    	color: #00afef;
    	padding-bottom: 5px;
    					
    }
    #slides .text2 {
    	width: 200px;
    	float: left;
    	margin-left: 80px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-left: 10px;
    	overflow: hidden; /*contain floats*/
    	background-color: #f2f2f2;
    	font-family: Arial;
    	background: #f2f2f2;
    	-moz-border-radius: 8px;
        	-webkit-border-radius: 8px;
        	-khtml-border-radius: 8px;
    	behavior: url(/border-radius.htc);
        	border-radius: 8px;				
    }
    #slides .text2 h3 {
    	color: #00afef;
    	padding-bottom: 5px;
    
    #slides .text1 h3 {
    	color: #00afef;
    	padding-bottom: 5px;
    					
    }
    		
    
    /** END slides **/
    Last edited by CarlMartin10; 08-16-2010 at 06:24 AM.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your markup and fix the errors in it. You can't have the same id for multiple elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Validate your markup and fix the errors in it. You can't have the same id for multiple elements.

    I don't have multiple elements with the same id..... I just rechecked it.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    1) You're missing a } for the #slides .text2 h3 {

    2) If you add: border: 1px solid red; to your #slides, you'll see that your div is collapsed. I think it has something to do with the floats (my css is rusty about 5 years since I last touched it)

    3) Your url looks right, so I don't know why it doesn't show. If I replace it with the absolute url, the background image appears..


    Hope this helped a little.
    Running Windows 7 x64

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    I see that. I made those corrections. When I changed the uro to the absolute url....the image still did not appear.
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    #slides {
    background: url(../images/slide1_bg.png) no-repeat bottom;
    }
    You need to apply a width and height to an element to show the background.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CarlMartin10 (08-16-2010)

  • #7
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Thank You very much . That was the problem
    Website: www.billboardfamily.com
    Twitter: www.twitter.com/billboardfamily
    Facebook Fan Page: www.facebook.com/BillboardFamily
    Facebook (Carl): www.facebook.com/CarlMartin.BillboardFamily (admin note: sig should be <=4 lines)


  •  

    Posting Permissions

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