Jump to content

Background image


Fmdpa
 Share

Recommended Posts

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

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 ???

Edited by Deirdre's Dad
Link to comment
Share on other sites

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...