PDA

View Full Version : background image question


Agamarama
03-05-2010, 09:28 PM
I'm trying to add a background image to a page, but the image is all white except for a small design in the bottom right corner. I'd like to arrange it so that, no matter how long the page is, the design will be seen in the bottom-right corner. any suggestions would be greatly appreciated :D

edbr
03-05-2010, 11:42 PM
position absolute, use right and bottom

d a v e
03-06-2010, 06:58 AM
although if it's a page background then simply set the page background on the body like this
body {
background-color:white;
background-image: url(image.png);
background-position: bottom right;
background-repeat: no-repeat;
}

DWcourse
03-06-2010, 01:03 PM
although if it's a page background then simply set the page background on the body like this
body {
background-color:white;
background-image: url(image.png);
background-position: bottom right;
background-repeat: no-repeat;
}

Dave, that should work and actually appears to for IE but whenever I try it on other browsers the background-image appears going off the top-right side of the window??????

Agamarama
03-06-2010, 04:11 PM
Thanks for the help! It seems to work in IE and Firefox for me.

d a v e
03-06-2010, 08:05 PM
xpos ypos - i had them transversed. that might mess things up!

gentleone
03-11-2010, 10:14 PM
that should work and actually appears to for IE but whenever I try it on other browsers the background-image appears going off the top-right side of the window??????

You can solve this by adding a 100% width and height to the CSS rule of the body tag.

body {
width: 100%;
height: 100%;
background: white url(image.png) no-repeat bottom right;
}

DWcourse
03-11-2010, 10:43 PM
gentleone, that doesn't seem to matter to Firefox and Safari. They seem to interpret the bottom of the <body> to be where ever the content ends, not the browser window.

DWcourse
03-11-2010, 10:46 PM
Here's what finally worked for me:

body {
background: white url(image.jpg) no-repeat fixed right bottom;
}

gentleone
03-12-2010, 08:01 AM
Here's what finally worked for me:

body {
background: white url(image.jpg) no-repeat fixed right bottom;
}

Ahaha... okay, well I solved it with the 100% one time, but that's weird then :)