Background speed..

by Louis Raven

Posted: 15 years ago 7 replies

WEB DESIGN

Hey all,

I'm slowly weaning myself off of WYSIWYG and need to know, What is the quickest loading background to use for overlaying with content/text and why?

An on-page image?

White background image?

white background table?

A CSS container?

CSS div?

I've been using an 800px by 4000px white image to place my content on and to be honest I'm sure this is a designers nightmare lol.

All the best and thanks for reading,

Louis

#background #speed

Aaron H 15 years ago

Hi Louis, adding a background image/color to the body tag is a nice easy option with CSS, like the one I used for the site in my sig (which is made up of a background image in the body and then the rest chopped up in my header containers).

body{
font: 100% arial,sans-serif;
text-align:center;
background-color:#8ab343;
background-image:url(/Graphics/SiteGeneral/SiteBG.jpg);
background-repeat:no-repeat;
background-position:center top;
}

Then you can add background images to other container divs to make up really elaborate backgrounds. (have to admit I get a little carried away sometimes)

Another good tip is saving your image as a .gif file if it's made up of solid colors rather than something like a photo where theres lots of shading, I've used really large background gifs at around 10kb that if I'd have saved them as jpg would have been 80kb.

You'll never look back once you start using CSS
- Thanks
{{ DiscussionBoard.errors[200791].message }}
Louis Raven 15 years ago

Thanks Aaron but I meant the white background behind content/text.

For the whole site MAIN background I usually just assign a #color.

Louis
- Thanks
Signature
Business Website Hosting
Car Detailing Network
How to Start a Mobile Detailing Valeting Business
Website Hosting Domain Marketing Templates Themes Logo
Detailing Discounts Valeting Directory
Detailing Forum Business Valeting Community
{{ DiscussionBoard.errors[200830].message }}
Aaron H 15 years ago

Sorry Louis, I'm not with it today.

You can use the same principle for anything in your HTML with CSS not just the body so you can just add an id to the table or container div and use it to add a background the same way.

But if you want just a couple of words to have say a yellow background then you need to add a span to those words so in your HTML you have something like:

<span class="yellowbg">Not your usual bike review</span>

and in your CSS you declare it like this:

.yellowbg{
background-color:#ffff00;
}

Hope that helps
- Thanks
{{ DiscussionBoard.errors[200953].message }}
Louis Raven 15 years ago

Hey Aaron I took a look at your site and I see you also use images as content backgrounds "Footer960.jpg".

My main concern is loading times but it seems most choose an image over just assigning a colour to the background which I would have thought loaded quicker?

I'm currently trying to learn CSS as it's so more advance than html.

Thank you,
Louis
- Thanks
Signature
Business Website Hosting
Car Detailing Network
How to Start a Mobile Detailing Valeting Business
Website Hosting Domain Marketing Templates Themes Logo
Detailing Discounts Valeting Directory
Detailing Forum Business Valeting Community
{{ DiscussionBoard.errors[201015].message }}
Aaron H 15 years ago

If it was just a solid color then I'd definately assign a color to the div or whatever I was using rather than use an image.

If you're learning CSS and you've got a little bit of HTML under your belt I'd highly recommend the following two books:
Web Standards Solutions: The Markup and Style Handbook (Dan Cederholm)
CSS Mastery: Advanced Web Standards Solutions (Andy Budd, Cameron Moll and Simon Collison)

I stopped and started with CSS years back but once I'd read the 'Web Standards Solutions' book I felt very comfortable using CSS, it's very easy to follow too.
- Thanks
{{ DiscussionBoard.errors[201116].message }}
LADWebDesign 15 years ago

Louis:

Try this link for learning CSS: CSS Background Properties

The background repeat option with CSS really helps to cut down on load times. Make your original image as small as possible and you can repeat it as much as you want.

This can work for page backgrounds, or page element backgrounds. Works the same way for both.

Linda
- Thanks
{{ DiscussionBoard.errors[201152].message }}
Louis Raven 15 years ago

Hi Linda,

would you reccomend using an image, div or table for white content/text backgrounds?

Thanks
- Thanks
Signature
Business Website Hosting
Car Detailing Network
How to Start a Mobile Detailing Valeting Business
Website Hosting Domain Marketing Templates Themes Logo
Detailing Discounts Valeting Directory
Detailing Forum Business Valeting Community
{{ DiscussionBoard.errors[201421].message }}

Background speed..

Trending Topics

How do I effectively build and nurture an email list for affiliate marketing purposes?

Are billboards still effective in driving customers?

Are Solo ADs the Most Cost Effective Way to Promote your Product?

Been a while! Any of you Old Timers here?

How much does the rebranding affect CR ?