BG image for webpage

sgtmac66 · #1 (**permalink**) 07-02-2009, 09:22 AM

I am looking to figure out how to make or use a BG image to fill in the margins left by my web layout. I know how to insert the image into the BG, the problem is fitting one with an image that does not repeat or distort the image.

What I am looking for, is how to make an WWII image of a soldier that just peeks out from the left hand margin, but also fills the margins at top, bottom left and right, without repeating.

Look here to see an example. Scroll down to the lower left, where the Bing ad acts like the template with the BG showing thru at the left.

lisa · #2 (**permalink**) 07-02-2009, 11:10 AM

You could make the image very large 1600x1200, with the focal point in the top left corner of the image and use no-repeat attribute with your stylesheet. That's what I did with my Twitter background http://www.twitter.com/2createawebsite

Your CSS would be something like....

HTML Code:

{background-image: url(images/soldier.gif); background-repeat: no-repeat;}

Just remember that everyone has different browser resolutions so the placement of the focal point may be different depending on the resolution.

This is one way to do it. Maybe others have other ways.

kelevraco · #3 (**permalink**) 07-02-2009, 11:37 AM

one way to do this would to be build a background image of a dimension of let's say 1440*900. Set your main site to a fixed width of 1000 while making your background image fade the end of your image to match your background color. This will then flow seamlessly with no hiccups in all resolutions. Granted people with higher resolutions will have more of your back ground color showing. But it seems as of right now the most popular screen resolution at least on my sites are 1440*900

lisa · #4 (**permalink**) 07-02-2009, 12:22 PM

Quote:

Originally Posted by kelevraco

one way to do this would to be build a background image of a dimension of let's say 1440*900. Set your main site to a fixed width of 1000 while making your background image fade the end of your image to match your background color. This will then flow seamlessly with no hiccups in all resolutions. Granted people with higher resolutions will have more of your back ground color showing. But it seems as of right now the most popular screen resolution at least on my sites are 1440*900

Even better idea!

sgtmac66 · #5 (**permalink**) 07-03-2009, 09:47 AM

Thanks to both for the excellent advice...Lisa you Twitter page is just what I was trying to accomplish!...but...

The images I am using are very old B&W. I did experiment with one of my dad, but just couldn't get the image right enough where I liked it. Thanks to your advice I will play with this some more.

While playing aound with the backgrounds last night, I made a 1024x768 bg image, using a combination of olive drab/desert camo and angled it 45 degree's. I must say it came out terrific and compliments the rest of the layout, which is 900 px wide...

I see that Kele is recommending 1000 wide? Anyway, you guys as susual have given me some excellent advice, which I will play with...

Have a great 4th....Whiz! Pop! Bang!!!

kelevraco · #6 (**permalink**) 07-03-2009, 03:30 PM

The 1000 wide is just what I use on most of my sites. This way it still fits the lower resolution users but, helps with the larger resolution users as well.

sgtmac66 · #7 (**permalink**) 07-03-2009, 09:27 PM

Quote:

Originally Posted by kelevraco

The 1000 wide is just what I use on most of my sites. This way it still fits the lower resolution users but, helps with the larger resolution users as well.

Good idea..I will have to experiment with this one...thanks

WB Sponsors