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 07: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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    #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
    •