Log in

View Full Version : CSS Optimum Background Image change


PRT
11-19-2007, 11:46 PM
Have a simple site I'm helping a friend with: www.clearcomms.net
And have a newbie question.

I wanted to have the background image change based on the page visited.

So I created these classes based on my html pages:

/* Various classes */

.company { }
.auto { }
.building { }
.video { }
.automation { }
.contact { }

Identified each html document in the body tag:

<body class="auto">

Then changed the CSS to match body class with background image:


#desc {
height:200px;
color:#ffffff;
padding:0;
background:#505050 url(images/ccopen4.jpg) top left no-repeat;
clear:both;
margin:5px 0 15px 0;
}

body.company div#desc {background-image: url(images/robbg.jpg); }
body.auto div#desc {background-image: url(images/autobg.jpg); }
body.building div#desc {background-image: url(images/buildingbg.jpg); }
body.video div#desc {background-image: url(images/videobg.jpg); }
body.automation div#desc {background-image: url(images/automationbg.jpg); }
body.contact div#desc {background-image: url(images/concourse.jpg); }


And it all seems to work. www.clearcomms.net
My question is this: IS there a better or more efficient way of doing this?
It 'seems' the page loads a little slower, but it may be my imagination.

Thanks in advance on any help,
Paul
boogyman
11-20-2007, 02:59 AM
it should only be slower to load the first time each page is visited, after that the image should be filed into cache and it would take less time. now on that note you also need to think about the resolution of each of the images... if 1 of the images has higher resolution that will take longer than one with lower resolution
BLiZZaRD
11-20-2007, 01:56 PM
You could always use CSS to preload all the images into the users cache on the main page of the site. By doing so the main content is shown, and while they are looking around or wondering where to click the other images are loading. If they browse to another page before that images is fully loaded (doubtful) then no worries as your image will then load for that page, as it is browsed too.
boogyman
11-20-2007, 02:13 PM
as far as I am aware CSS cannot preload images.

you could create a background JS preload script, but CSS is for layout/structure only. it cannot 'manipulate', for lack of a better brain fart word, the browser
BLiZZaRD
11-20-2007, 03:41 PM
Of course it can, you just have to know how ;)

You can take a look at my CSS code (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/) that I wrote for a nav menu in CSS which uses images instead of code. It loads the start images of the nav menu and preloads the rollover/swap images so there is no blink or lag when rolling over.
PRT
11-20-2007, 04:05 PM
Great Idea, I forgot I could do this.

This worked perfectly:

Added this to the HEAD section
<style type="text/css"> .hiddenPic {display:none;} </style>

Then at the very bottom of the page added this for every image I wanted to pre-load, made a BIG difference on all the other pages.

<img src="images/buildingbg.jpg"
alt="Clear Communications Building Amplifier Installation" title="Clear Communications Building Amplifier Installation"
height="200" width="730" class="hiddenPic">
boogyman
11-20-2007, 05:00 PM
Of course it can, you just have to know how ;)

You can take a look at my CSS code (http://outsidetheurl.com/FrozenCoyoteLabs/Codes/) that I wrote for a nav menu in CSS which uses images instead of code. It loads the start images of the nav menu and preloads the rollover/swap images so there is no blink or lag when rolling over.

change the color of the font? maybe? or background color?

gray on blue is very hard to read?
BLiZZaRD
11-21-2007, 06:27 AM
change the color of the font? maybe? or background color?

gray on blue is very hard to read?

Design of the site is the #1 reason it is not "live" yet ;)