Large picture background - Checkout this page. At the moment I just have an enormous jpeg file set as background in the BODY tag.

trixiemay · 25th November 2009, 02:03 AM

Checkout this page.

At the moment I just have an enormous jpeg file set as background in the BODY tag.

Is this correct? Or is there a more efficient way of coding the background?

saltedm8 · 25th November 2009, 08:18 AM

To be honest with you, its not the greatest idea because it obviously slows down the load time of your page and could potentially lose you visitors

but at the same time, I dont know how you could get around it as its not a repeating image or anything like that

WelshStew · 25th November 2009, 08:27 AM

I've been waiting over 30 seconds and the image still hasn't loaded, so I would say yes - it's a bit too large (almost half a mb once it finally loaded)

The issue you are going to have with a background like this is that it is irregular, and as such you are not going to be able to repeat much of it.

However, if you have the time then I would do the following:

extract the cloud images and put these into a transparent png
recreate the blue sky fade, reduce width to 2px and repeat along the X axis
overlay the two layers; something like this:

Code:

<html>
<head>
<style type="text/css">
body{background:url(/images/blue-bckgrd.jpg) repeat-x;}
#clouds{background:url(/images/cloud-bckgrd.png) transparent top-left no-repeat;}
</head>
<body>
<div id="clouds">
<div id="content">
blah blah
</div>
</div>
</body>
</html>

Although now two images, this should have reduced the delivery package considerably.

Mike Hopley · 25th November 2009, 09:16 AM

I'm not sure whether WelshStew's suggestion will actually work. I would expect the use of an alpha-transparent PNG to increase the file size by a lot. Then again, if you use PNG-8, it might work.

But really, you should change the design so that it doesn't use such a large image.

Your design is trying to add visual interest to a very plain page, by using a large background image. A better option is to make the overall design a bit more interesting, so that you need not rely on a big image. This would leave you with a better design that also loaded faster.

Your heading typeface is nice, but the colours are dull: blue on grey, with black body text. How about something livelier, such as a "citrus" colour scheme (oranges or limes for the heading text, white background, black body)?

The text looks like it came straight out a Word document. Add some leading, so that it can breathe (CSS: p,li {line-height: 1.5em; } ). You may also need to add some margins or padding.

Then you just need a good photo of the product, perhaps framed by a border or polaroid effect.

25th November 2009, 02:03 AM	#1
trixiemay Member Join Date: Jan 2009 Posts: 66 Thanks: 1 Thanked 0 Times in 0 Posts	Large picture background Checkout this page. At the moment I just have an enormous jpeg file set as background in the BODY tag. Is this correct? Or is there a more efficient way of coding the background?

25th November 2009, 08:18 AM	#2
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,456 Blog Entries: 5 Thanks: 13 Thanked 43 Times in 43 Posts Expertise: (X)HTML / CSS Experience: Professional	To be honest with you, its not the greatest idea because it obviously slows down the load time of your page and could potentially lose you visitors but at the same time, I dont know how you could get around it as its not a repeating image or anything like that __________________ THePiNcH

25th November 2009, 08:27 AM	#3
WelshStew Join Date: Dec 2008 Posts: 1,622 Blog Entries: 3 Thanks: 10 Thanked 24 Times in 23 Posts Expertise: (X)HTML / CSS Experience: Professional	I've been waiting over 30 seconds and the image still hasn't loaded, so I would say yes - it's a bit too large (almost half a mb once it finally loaded) The issue you are going to have with a background like this is that it is irregular, and as such you are not going to be able to repeat much of it. However, if you have the time then I would do the following: extract the cloud images and put these into a transparent png recreate the blue sky fade, reduce width to 2px and repeat along the X axis overlay the two layers; something like this: Code: <html> <head> <style type="text/css"> body{background:url(/images/blue-bckgrd.jpg) repeat-x;} #clouds{background:url(/images/cloud-bckgrd.png) transparent top-left no-repeat;} </head> <body> <div id="clouds"> <div id="content"> blah blah </div> </div> </body> </html> Although now two images, this should have reduced the delivery package considerably. __________________ WelshStew extreme sports t shirts & clothing \| Movember - moustache growing for charity

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

25th November 2009, 09:16 AM	#4
Mike Hopley Member Join Date: Jul 2009 Posts: 91 Thanks: 0 Thanked 7 Times in 7 Posts Expertise: (X)HTML / CSS Experience: Quite Good	I'm not sure whether WelshStew's suggestion will actually work. I would expect the use of an alpha-transparent PNG to increase the file size by a lot. Then again, if you use PNG-8, it might work. But really, you should change the design so that it doesn't use such a large image. Your design is trying to add visual interest to a very plain page, by using a large background image. A better option is to make the overall design a bit more interesting, so that you need not rely on a big image. This would leave you with a better design that also loaded faster. Your heading typeface is nice, but the colours are dull: blue on grey, with black body text. How about something livelier, such as a "citrus" colour scheme (oranges or limes for the heading text, white background, black body)? The text looks like it came straight out a Word document. Add some leading, so that it can breathe (CSS: p,li {line-height: 1.5em; } ). You may also need to add some margins or padding. Then you just need a good photo of the product, perhaps framed by a border or polaroid effect.