homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Background Image Fitting to Screen
can't get background image to fit screen---source image is too big

5+ Year Member

Msg#: 4215846 posted 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.




Msg#: 4215846 posted 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.



5+ Year Member

Msg#: 4215846 posted 9:48 pm on Oct 12, 2010 (gmt 0)

Here is the link: c2ctennis.com .



Msg#: 4215846 posted 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]


Msg#: 4215846 posted 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


5+ Year Member

Msg#: 4215846 posted 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" ):

<div id="bg_img">
<img src="images/grass_ball8.jpg" />
</div><!--end div "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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved