HTML/CSS - Background Image vs. Color?

OnePostWonder · Feb 18, 2013, 03:44 PM

When a very similar color is available, what is the purpose of having a single color background image?

For example, a reputable site using a background image as a default, and a color that is only a few RGB values different as a backup:

WebPlatform

Isn't it faster for the browser to parse the HTML rather than loading the image? I know on a modern PC it makes little difference, but for people who are using older hardware it would seem to matter more.

Thanks in advance.

W1zzard · Feb 18, 2013, 03:46 PM

the background image has a pattern, not a solid color

OnePostWonder · Feb 18, 2013, 03:55 PM

Quote:

Originally Posted by W1zzard

the background image has a pattern, not a solid color

bg-pattern.png

Wow, I knew they had called the file bg-pattern, but it looked like only one color to me. I actually stared at that for a bit before I saw it wasn't uniform.

Zooming in in Paint showed more. Is it some kind of effect to have such small variations in the image?

Also, how were you able to tell? Good monitor?

W1zzard · Feb 18, 2013, 04:26 PM

good monitor, good eyes, can read filenames

it is a subtle effect but even on sub-optimal monitors it has a visual effect

Frick · Feb 18, 2013, 04:36 PM

I have bad eyes and a bad monitor and even I could see that it was a pattern. It's just a picture that repeats endlessly.

OnePostWonder · Feb 18, 2013, 06:24 PM

Quote:

Originally Posted by W1zzard

good monitor, good eyes, can read filenames

it is a subtle effect but even on sub-optimal monitors it has a visual effect

Tough day at work?

Quote:

Originally Posted by Frick

I have bad eyes and a bad monitor and even I could see that it was a pattern. It's just a picture that repeats endlessly.

Implying what?

I have no way of controlling it, but I would say that without zooming in on the file, a large percentage of people wouldn't be able to see the difference.

Well, now I know it's an image.

Aleksander · Feb 18, 2013, 07:03 PM

Difference between an image and a color is that the image will have an alt keyword, which can be indexed by the search engines.
The image is not optimized for CSS, but the color on the other hand is.

Frick · Feb 18, 2013, 07:24 PM

Quote:

Originally Posted by OnePostWonder

Implying what?

Nothing. Just saying.

OR AM I?

OnePostWonder · Feb 18, 2013, 08:18 PM

Quote:

Originally Posted by Frick

Nothing. Just saying.

OR AM I?

Frick · Feb 19, 2013, 12:16 PM

Another site, this slightly more noticable and almost headache-inducing:

http://coe.berkeley.edu/engnews/fall...polarbear.html

OnePostWonder · Feb 19, 2013, 02:04 PM

Quote:

Originally Posted by Frick

Another site, this slightly more noticable and almost headache-inducing:

http://coe.berkeley.edu/engnews/fall...polarbear.html

SLIGHTLY?

That background is indeed headache-inducing.

W1zzard · Feb 19, 2013, 02:06 PM

that page is from 2003 .. back then people were proud of such designs

Frick · Feb 20, 2013, 06:35 PM

Slightly related:

http://www.dokimos.org/ajff/

I don't think it's malicious, just ... yeah.

OnePostWonder · Feb 20, 2013, 06:50 PM

Quote:

Originally Posted by Frick

Slightly related:

http://www.dokimos.org/ajff/

I don't think it's malicious, just ... yeah.

1. Do I even want to know how you find these sites?

2. At least they're progressive and accept a (color)spectrum of different sexualities.

Aleksander · Feb 20, 2013, 09:36 PM

I don't know what you are searching for exactly, but here is what I call very good website design:
http://combadi.com
http://82nd-and-fifth.metmuseum.org/

And this is what I call exceptional website design:
http://secure.thameswater.co.uk/wate...aterwiselysurl
http://www.puma.com/

I know a lot more, but those are maybe the best

OnePostWonder · Feb 20, 2013, 10:09 PM

Quote:

Originally Posted by Aleksander

I don't know what you are searching for exactly, but here is what I call very good website design:
http://combadi.com
http://82nd-and-fifth.metmuseum.org/

And this is what I call exceptional website design:
http://secure.thameswater.co.uk/wate...aterwiselysurl
http://www.puma.com/

I know a lot more, but those are maybe the best

Those websites implement the latest standards very well.

Feb 18, 2013, 03:44 PM	#1
OnePostWonder Join Date: Dec 2008 Posts: 486 (0.30/day) Thanks: 61 Thanked 90 Times in 71 Posts System Specs	HTML/CSS - Background Image vs. Color? When a very similar color is available, what is the purpose of having a single color background image? For example, a reputable site using a background image as a default, and a color that is only a few RGB values different as a backup: WebPlatform Isn't it faster for the browser to parse the HTML rather than loading the image? I know on a modern PC it makes little difference, but for people who are using older hardware it would seem to matter more. Thanks in advance.

System Name:	New / Breakin' the Lol
Processor:	i5 2500k / Athlon64 X2 4200+ (65W)
Motherboard:	P8Z68-V PRO/GEN3 / Asus M2N4-SLI
Cooling:	/ Air (1 x 250mm, 2 x 120mm, 1 x 90mm)
Memory:	DDR3-1600 (8GB) / Crucial Ballistix Tracer PC2-6400 (2gb)
Video Card:	/ Visiontek 4870
Hard Disk:	HD103SJ /
CRT/LCD Model:	Viewsonic 22" VX2240W
Case:	Xigmatek Midgard II / Thermaltake VA8003SWA
PSU:	PC Power & Cooling Silencer 750W

Processor:	Intel Core i7-2600K @ 3.4 GHz
Motherboard:	ASUS P8Z68-V Pro
Memory:	3x 2048 MB Mushkin DDR3
Video Card:	ASUS GeForce GTX 670 Direct CU II TOP
Hard Disk:	Crucial C300 128 GB, WD6400AAKS 640 GB, WD15EADS 1.5 TB
Optical Drive:	BenQ DW1640
CRT/LCD Model:	Dell U3011 30", 2560x1600 + 19" 1280x1024
Case:	NZXT H2
Sound Card:	On-board Realtek HD
PSU:	Kingwin Absolute Platinum 550 W
Software:	Windows 7 64-bit

System Name:	New / Breakin' the Lol
Processor:	i5 2500k / Athlon64 X2 4200+ (65W)
Motherboard:	P8Z68-V PRO/GEN3 / Asus M2N4-SLI
Cooling:	/ Air (1 x 250mm, 2 x 120mm, 1 x 90mm)
Memory:	DDR3-1600 (8GB) / Crucial Ballistix Tracer PC2-6400 (2gb)
Video Card:	/ Visiontek 4870
Hard Disk:	HD103SJ /
CRT/LCD Model:	Viewsonic 22" VX2240W
Case:	Xigmatek Midgard II / Thermaltake VA8003SWA
PSU:	PC Power & Cooling Silencer 750W

Processor:	Intel Core i7-2600K @ 3.4 GHz
Motherboard:	ASUS P8Z68-V Pro
Memory:	3x 2048 MB Mushkin DDR3
Video Card:	ASUS GeForce GTX 670 Direct CU II TOP
Hard Disk:	Crucial C300 128 GB, WD6400AAKS 640 GB, WD15EADS 1.5 TB
Optical Drive:	BenQ DW1640
CRT/LCD Model:	Dell U3011 30", 2560x1600 + 19" 1280x1024
Case:	NZXT H2
Sound Card:	On-board Realtek HD
PSU:	Kingwin Absolute Platinum 550 W
Software:	Windows 7 64-bit

Feb 18, 2013, 03:46 PM	#2
W1zzard Benevolent Dictator Join Date: May 2004 Location: Stuttgart, Germany Posts: 13,791 (4.18/day) Thanks: 184 Thanked 10,283 Times in 3,175 Posts System Specs	the background image has a pattern, not a solid color

Feb 18, 2013, 04:26 PM	#4
W1zzard Benevolent Dictator Join Date: May 2004 Location: Stuttgart, Germany Posts: 13,791 (4.18/day) Thanks: 184 Thanked 10,283 Times in 3,175 Posts System Specs	good monitor, good eyes, can read filenames it is a subtle effect but even on sub-optimal monitors it has a visual effect

Feb 18, 2013, 04:36 PM	#5
Frick Fishfaced Nincompoop Join Date: Feb 2006 Location: Sweden Posts: 7,895 (2.99/day) Thanks: 1,076 Thanked 1,448 Times in 1,154 Posts System Specs	I have bad eyes and a bad monitor and even I could see that it was a pattern. It's just a picture that repeats endlessly. __________________ Typemachine: Acer Aspire One D250 \| Atom N280 1.6 Ghz \| 1GB DDR2 \| 160GB SATA \| 10.1' 1024 x 600 \| Lubuntu 12.10 Oldbox: HP D530 \| Pentium 4 2.8 Ghz \| 1GB DDR \| 40GB \| Windows XP "The 'gentle biker' look is overdone. I'm going for 'psycho hillbilly.' "

System Name:	Ongoing scavanging
Processor:	Sempron 140
Motherboard:	MSI 760GM-P23 (FX)
Cooling:	Somesuch
Memory:	2GB DDR3
Video Card:	Something
Hard Disk:	160GB + 1TB
Optical Drive:	Yes
CRT/LCD Model:	19" 1280 x 1024
Case:	Wossname
Sound Card:	Creative Audigy 2 ZS with front panel
PSU:	FSP400-60APN
Software:	Windows 7 Pro

Feb 18, 2013, 07:03 PM	#7
Aleksander Join Date: Dec 2009 Posts: 3,028 (2.39/day) Thanks: 648 Thanked 280 Times in 228 Posts System Specs	Difference between an image and a color is that the image will have an alt keyword, which can be indexed by the search engines. The image is not optimized for CSS, but the color on the other hand is.

System Name:	Mercury
Processor:	Phenom II x4 B50
Motherboard:	ASUS M4A89GTD PRO
Cooling:	Cooler Master Hyper TX3
Memory:	6GB Ram (4GBx1 Corsair 2GBx1 Nanya)
Video Card:	PowerColor AX6770 V2.0
Hard Disk:	1TB Hitachi, 500 GB WD Blue
Optical Drive:	DVD-RAM
CRT/LCD Model:	Philips 247E-LPH 24" 1920x1080
Case:	Mercury
Sound Card:	Integrated Realtek
PSU:	Corsair 750TX
Software:	Windows 7 64-bit
Benchmarks:	Maybe it is time to benchmark :D

Feb 19, 2013, 12:16 PM	#10
Frick Fishfaced Nincompoop Join Date: Feb 2006 Location: Sweden Posts: 7,895 (2.99/day) Thanks: 1,076 Thanked 1,448 Times in 1,154 Posts System Specs	Another site, this slightly more noticable and almost headache-inducing: http://coe.berkeley.edu/engnews/fall...polarbear.html __________________ Typemachine: Acer Aspire One D250 \| Atom N280 1.6 Ghz \| 1GB DDR2 \| 160GB SATA \| 10.1' 1024 x 600 \| Lubuntu 12.10 Oldbox: HP D530 \| Pentium 4 2.8 Ghz \| 1GB DDR \| 40GB \| Windows XP "The 'gentle biker' look is overdone. I'm going for 'psycho hillbilly.' "

Feb 19, 2013, 02:06 PM	#12
W1zzard Benevolent Dictator Join Date: May 2004 Location: Stuttgart, Germany Posts: 13,791 (4.18/day) Thanks: 184 Thanked 10,283 Times in 3,175 Posts System Specs	that page is from 2003 .. back then people were proud of such designs

Feb 20, 2013, 06:35 PM	#13
Frick Fishfaced Nincompoop Join Date: Feb 2006 Location: Sweden Posts: 7,895 (2.99/day) Thanks: 1,076 Thanked 1,448 Times in 1,154 Posts System Specs	Slightly related: http://www.dokimos.org/ajff/ I don't think it's malicious, just ... yeah. __________________ Typemachine: Acer Aspire One D250 \| Atom N280 1.6 Ghz \| 1GB DDR2 \| 160GB SATA \| 10.1' 1024 x 600 \| Lubuntu 12.10 Oldbox: HP D530 \| Pentium 4 2.8 Ghz \| 1GB DDR \| 40GB \| Windows XP "The 'gentle biker' look is overdone. I'm going for 'psycho hillbilly.' "

Feb 20, 2013, 09:36 PM	#15
Aleksander Join Date: Dec 2009 Posts: 3,028 (2.39/day) Thanks: 648 Thanked 280 Times in 228 Posts System Specs	I don't know what you are searching for exactly, but here is what I call very good website design: http://combadi.com http://82nd-and-fifth.metmuseum.org/ And this is what I call exceptional website design: http://secure.thameswater.co.uk/wate...aterwiselysurl http://www.puma.com/ I know a lot more, but those are maybe the best

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
too much space (html/css)	digibucc	Programming & Webmastering	0	Oct 19, 2011 07:20 PM
Html or css pages!!!!	Aleksander	Programming & Webmastering	7	Mar 31, 2011 10:49 AM
HTML/CSS Table border question	Akumos	Programming & Webmastering	6	Jan 3, 2011 01:06 PM
Css & Html	Wozzer	Programming & Webmastering	12	Sep 22, 2008 01:29 PM
Html/css	Thermopylae_480	General Software	1	Oct 10, 2006 02:04 PM