Forum Moderators: not2easy

Message Too Old, No Replies

Background Image only showing on first div

all divs are of same class

         

Mike521

6:19 pm on Oct 27, 2008 (gmt 0)

10+ Year Member



I'm trying to have multiple divs on a page that all have the same background image, in the same position for each one (with no-repeat).

but it seems that only the first div gets the background, while others get nothing.

If this is the proper behavior, can someone explain the details to me, I don't understand it.

Also if there's a workaround to accomplish what I'm looking for that would be good too.

Here's some sample code. when I look at this in firefox, only the first div (class="BGImages") gets the background. The other div of the same class has no background

Thanks in advance

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">

.BGImages {
float: left;
height: 200px;
width: 200px;
border: 1px solid #0000FF;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(/images/anImage.jpg);
}
.BGImages a img {
padding: 20px;
padding: 15px 30px 30px 30px;
border: none;
}

</style>

</head>
<body>

<div class="BGImages"><a href="#"><img src="/images/theTopImage.png" width="25" height="25"></a></div>

<div class="BGImages"><a href="#"><img src="/images/theOtherTopImage.png" width="25" height="25"></a></div>

</body>
</html>

D_Blackwell

2:51 am on Oct 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't see the problem that you describe or see where there would be one. Perhaps you have some other declaration that is interfering that you don't know about yet.?

Note: You have declared padding: twice in the same declaration. That should be fixed, though has no bearing on the question posed.

.BGImages a img {
padding: 20px;
padding: 15px 30px 30px 30px;

Mike521

3:15 pm on Oct 28, 2008 (gmt 0)

10+ Year Member



I figured it out, it's because of the background-attachment: fixed; part. That applied to the background image and made it stationary, and wouldn't allow it to repeat on each div. Soon as I got rid of that it worked.

As for the padding, I just added the new line for testing and forgot to update it when posting the code here.