Is it possible to place a background image in a div tag, having it be fixed so the text scrolls over it?
It seems that using background-attachment:fixed; places the image on the body tag automatically.
My site is 780 wide and centered so if I use 'fixed' and position it so it will be behind the div it stays put when you resize the screen and then the image is no longer in the correct position.
I've also played around with background-position percentages but still have a problem when resizing the window.I think you're looking for something like this:
.divclass_x {
background: url(image/mybkgrndimg.gif) no-repeat;
}
hope that helps, you can even give the background a color too if your image doesn't fill the whole div
.divclass_x {
background: #000 url(image/mybkgrndimg.gif) no-repeat;
}That doesn't work.
It scrolls up leaving white space.
I'm looking for a fixed background (for a div - not the body) that does not scroll and positions the same in all browsers.
The div itself has overflow:auto so it scrolls the contents within itself.
I don't want the background image to scroll with it.I just solved it.
I had to use a WinIE hack (duh, why didn't I think of this in the first place)?
.clouds {
background-image:url(images/clouds30b.jpg);
background-position:160px 110px;
background-attachment:fixed;
background-repeat:no-repeat;}
* html .clouds { /*** IE5.x/win fix ***/
background-position:0 0;}
Here's the link:
<!-- m --><a class="postlink" href="http://www.crn3.net/referrals-in-action.html">http://www.crn3.net/referrals-in-action.html</a><!-- m -->
It seems that using background-attachment:fixed; places the image on the body tag automatically.
My site is 780 wide and centered so if I use 'fixed' and position it so it will be behind the div it stays put when you resize the screen and then the image is no longer in the correct position.
I've also played around with background-position percentages but still have a problem when resizing the window.I think you're looking for something like this:
.divclass_x {
background: url(image/mybkgrndimg.gif) no-repeat;
}
hope that helps, you can even give the background a color too if your image doesn't fill the whole div
.divclass_x {
background: #000 url(image/mybkgrndimg.gif) no-repeat;
}That doesn't work.
It scrolls up leaving white space.
I'm looking for a fixed background (for a div - not the body) that does not scroll and positions the same in all browsers.
The div itself has overflow:auto so it scrolls the contents within itself.
I don't want the background image to scroll with it.I just solved it.
I had to use a WinIE hack (duh, why didn't I think of this in the first place)?
.clouds {
background-image:url(images/clouds30b.jpg);
background-position:160px 110px;
background-attachment:fixed;
background-repeat:no-repeat;}
* html .clouds { /*** IE5.x/win fix ***/
background-position:0 0;}
Here's the link:
<!-- m --><a class="postlink" href="http://www.crn3.net/referrals-in-action.html">http://www.crn3.net/referrals-in-action.html</a><!-- m -->