Fmdpa Posted April 10, 2010 Share Posted April 10, 2010 I am making a page with a base background of black, then a backgruond image centered over that. Here is the code I have in the <head> section: <style type="text/css">body {background:black url('myimage.jpg') no-repeat top;margin:middle;}</style> It works perfectly EXCEPT for one thing. The image is about twice the length of the viewable page, so it should have a vertical scroll bar. But instead of that, it just cuts the image to FIT the page. How do I make the BG image so it isn't cropped? Thanks! Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 A background image will always be cropped. I mean, the document will never expand just to fit the size of a background. That's sort of the point.But you should be able to set the height of your body element to the height of your image.If not, put all your content in a wrapper div the height of your image, and let the image be the background of the div.You should also be able to let your image be a regular img element. Make sure it is the first image in your body and give it absolute positioning. Everything else should start from the top as normal and be positioned in front of the image.margin:middle ??? Link to comment Share on other sites More sharing options...
Fmdpa Posted April 11, 2010 Author Share Posted April 11, 2010 Thanks Deirdre's Dad. I never thought of expanding the height of the body element. I'll give it a try. Yes, margin:middle doesn't make much sense, but after nothing else logical worked to center the BG image (including your code in the other thread), I tried this and it worked! Link to comment Share on other sites More sharing options...
Fmdpa Posted April 14, 2010 Author Share Posted April 14, 2010 Thanks! Heightening the body worked pefectly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.