Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background flashes on refresh

Status
Not open for further replies.
johnnygeo

johnnygeo

Programmer
Apr 23, 2003
125
US
I'm working on a website using CSS layout - the address is (please ignore the many other problems with the site for the moment). The background consists of a 1x3-pixel bitmap applied to the <body> in the external stylesheet. The page looks fine when it loads up (at least, *I* think so :) ). However, if you press F5 in IE, there is an annoying flash of white when the page reloads before the background is reapplied.

I'm pretty much ignorant of the mechanics of how a page loads; is there a way to make the background get applied earlier on, or retrieve it from the cache faster?

I might also note that Mozilla Firebird doesn't flash white; perhaps it loads images differently?
 
Sort by date Sort by votes
try using a .GIF or .JPG file format for images. Bitmaps are much bigger and take a long time to load (relatively speaking) and are not really suited to web graphics.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
When refreshing the page, it looks like part of the page is loading before your background does (like the logo, top nav bar, and pretty much all of the content). You need to have your background load first, before the rest of the content. Try loading your background at the beginning of the page.

Hope This Helps!

Ecobb
- I hate computers!
 
Upvote 0 Downvote
the problem is that text loads faster and is given preference over images. the first time it loads the page there is no cahce therefore it seems that the text and images are coming in some order. but the next time a cache is created. the text is retained. and therefore loads first. if u notice it is not only the background but the other images will also load slowly...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
OK, I tried both .gif and .jpg as you suggested, but there's no difference in performance. I didn't really expect there to be, because for an image this small, the .bmp at 66 bytes is actually smaller than .gif (809b) or .jpg (639b).

I should stress that the problem is that the background appears to be applied *last*, so the background is white *while the text and other images are being applied*.
 
Upvote 0 Downvote
Ecobb: Thanks, but how do I do this?

Originally, I set the background in the HTML:

Code: 
<body background=&quot;images\bg_horiz_blue.bmp&quot;>

which (it seems to me) should be the first thing to be applied. When that didn't work, I removed the background from the HTML and moved it to the very top of the external stylesheet:

Code: 
body {
	font-family: &quot;Trebuchet MS&quot;, sans-serif;
	color: #9999FF;
	background-image: url(images/bg_horiz_blue.jpg);
}

Where else can I move it to so it loads &quot;at the beginning of the page&quot;?
 
Upvote 0 Downvote
i also have the same problem i was never able to solve it. preloading images also did not help...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
well that is because your default background color is white. so when you hit refresh your default color shows up first. change your page background to say black and hit F5, now do you get a black flash. If that is the case then just make your background color the same as your background image.

<signature>
sometime you just gotta say &quot;WHAT THE @#*% !!&quot;
</signature>
 
Upvote 0 Downvote
deecee: Thanks! I didn't think of applying both a color and an image to the background. Now the HTML has:

Code: 
<body bgcolor=&quot;#000033&quot;>

and the stylesheet applies the image background. There's still a flash, but it's so close to the image tone that it's barely noticeable. I can definitely live with that.
 
Upvote 0 Downvote
glad to help

<signature>
sometime you just gotta say &quot;WHAT THE @#*% !!&quot;
</signature>
 
Upvote 0 Downvote
Setting the background colour to a similar tone to the image has another advantage: people surfing with images switched off will get a similar effect to the rest of us. Also, some search engines may have penalised you for effectively using white text on a white background (they can't check the image) as it looks like a spammy technique.

By the way, you should never use .bmp files on a web page - not all browsers can understand them. Only use gif, jpg or (at a pinch) png formats for web graphics. When building gifs, remember to reduce the colour depth to fit in with your image - I made a 3-colour GIF version of your background image that's 87 bytes in size.

-- Chris Hunt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
730
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
792
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
206
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
735
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top