Background Image Fitting to Screen

Forum Moderators: not2easy

Message Too Old, No Replies

Background Image Fitting to Screen

can't get background image to fit screen---source image is too big

amature_php

7:52 pm on Oct 12, 2010 (gmt 0)

I know that this must be a stupid question, but I've been away from CSS for so long that I can't seem to figure this out. I want an image to be my background and fit to the size of the screen, whatever it may be. The problem is that the image appears to be too big as I have to scroll across and down to view it. I know that I could use an image editor and manually rescale the image, but if someone used a bigger/smaller screen than I have, they would experience the same problem. Any help is greatly appreciated.

Thanks

psquillace

8:47 pm on Oct 12, 2010 (gmt 0)

Can you post a link to what you are talking about so we can see. I know for me at least it would make it easier to see what is going on.

Paul

amature_php

9:48 pm on Oct 12, 2010 (gmt 0)

Here is the link: c2ctennis.com .

Thanks

Major_Payne

2:11 am on Oct 13, 2010 (gmt 0)

CSS 3 will do this, but it is not completely supported by all browsers. These will do a work around for you:

CSS Play [www.]

Pastebin [paynelessdesigns.pastebin.com]

sanji41

7:13 am on Oct 13, 2010 (gmt 0)

hi! i saw some tutorials 'bout this, they put the image in a table..oh well here it is: [css-tricks.com...]

hope this works for you :D

amature_php

2:44 pm on Oct 13, 2010 (gmt 0)

Thanks for all of the replies. I actually figured something out late last night. Major_payne, I can't wait for CSS3 to become the standard, its going to be awesome! And Sanji41, I saw this and many other tutorials that use essentially the same method, however I was still running into a resize problem on different size screens. Here is what I found(its all about the containing "div" ):
HTML---

<body>
<div id="bg_img">
<img src="images/grass_ball8.jpg" />
</div>
</body>

CSS---

#bg_img
{position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
z-index: -1;

}

#bg_img img
{width: 100%;
height: 100%;
min-width: 1000px;
min-height: 600px;
}

Works like a charm. But if anyone sees a potential problem please let me know.

Thanks again---your help is greatly appreciated