...

View Full Version : Why is my background image not showing up?



CarlMartin10
08-16-2010, 07:20 AM
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:

<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

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

abduraooft
08-16-2010, 07:44 AM
Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors in it. You can't have the same id for multiple elements.

CarlMartin10
08-16-2010, 07:47 AM
Validate your markup (http://validator.w3.org/#validate_by_input) 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.

qwertyuiop
08-16-2010, 07:54 AM
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 :o 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.

CarlMartin10
08-16-2010, 08:05 AM
I see that. I made those corrections. When I changed the uro to the absolute url....the image still did not appear.

abduraooft
08-16-2010, 09:15 AM
#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.

CarlMartin10
08-16-2010, 09:49 AM
Thank You very much . That was the problem



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum