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

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4215848
 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




msg:4215874
 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




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

Here is the link: c2ctennis.com .


Thanks

Major_Payne




msg:4215961
 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




msg:4216040
 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




msg:4216225
 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><!--end div "bg_img"-->
</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

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