Welcome to WebmasterWorld Guest from 54.147.250.33

Forum Moderators: not2easy

Background Image Fitting to Screen

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

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

5+ Year Member



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
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
9:48 pm on Oct 12, 2010 (gmt 0)

5+ Year Member



Here is the link: c2ctennis.com .


Thanks
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]
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
2:44 pm on Oct 13, 2010 (gmt 0)

5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month