• We've upgraded our forums. Please post any issues/requests in this thread.

HTML/CSS - Background Image vs. Color?

Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#1
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

Administrator
Staff member
Joined
May 14, 2004
Messages
17,070 (3.44/day)
Likes
17,985
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#2
the background image has a pattern, not a solid color
 
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#3
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? :D
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
17,070 (3.44/day)
Likes
17,985
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#4
good monitor, good eyes, can read filenames

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

Frick

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
14,885 (3.45/day)
Likes
5,416
System Name A dancer in your disco of fire
Processor i3 4130 3.4Ghz
Motherboard MSI B85M-E45
Cooling Cooler Master Hyper 212 Evo
Memory 4 x 4GB Crucial Ballistix Sport 1400Mhz
Video Card(s) Asus GTX 760 DCU2OC 2GB
Storage Crucial BX100 120GB | WD Blue 1TB x 2
Display(s) BenQ GL2450HT
Case AeroCool DS Cube White
Power Supply Cooler Master G550M
Mouse Intellimouse Explorer 3.0
Keyboard Dell SK-3205
Software Windows 10 Pro
#5
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.
 
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#6
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?

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.
 
Joined
Dec 2, 2009
Messages
3,257 (1.11/day)
Likes
315
System Name Mercury KM-81
Processor Phenom II x4 B50
Motherboard ASUS M4A89GTD PRO
Cooling Cooler Master Hyper TX3
Memory 6GB Ram (4GBx1 Corsair 2GBx1 Nanya)
Video Card(s) PowerColor AX6770 V2.0
Storage 2TB WD Black, 1TB Hitachi, 500 GB WD Blue
Display(s) Philips 247E-LPH 24" 1920x1080
Case Mercury
Audio Device(s) Integrated Realtek
Power Supply Corsair 750TX
Software Windows 7 64-bit
Benchmark Scores Maybe it is time to benchmark :D
#7
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

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
14,885 (3.45/day)
Likes
5,416
System Name A dancer in your disco of fire
Processor i3 4130 3.4Ghz
Motherboard MSI B85M-E45
Cooling Cooler Master Hyper 212 Evo
Memory 4 x 4GB Crucial Ballistix Sport 1400Mhz
Video Card(s) Asus GTX 760 DCU2OC 2GB
Storage Crucial BX100 120GB | WD Blue 1TB x 2
Display(s) BenQ GL2450HT
Case AeroCool DS Cube White
Power Supply Cooler Master G550M
Mouse Intellimouse Explorer 3.0
Keyboard Dell SK-3205
Software Windows 10 Pro
#8
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#9
Last edited:

Frick

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
14,885 (3.45/day)
Likes
5,416
System Name A dancer in your disco of fire
Processor i3 4130 3.4Ghz
Motherboard MSI B85M-E45
Cooling Cooler Master Hyper 212 Evo
Memory 4 x 4GB Crucial Ballistix Sport 1400Mhz
Video Card(s) Asus GTX 760 DCU2OC 2GB
Storage Crucial BX100 120GB | WD Blue 1TB x 2
Display(s) BenQ GL2450HT
Case AeroCool DS Cube White
Power Supply Cooler Master G550M
Mouse Intellimouse Explorer 3.0
Keyboard Dell SK-3205
Software Windows 10 Pro
#10
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#11

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
17,070 (3.44/day)
Likes
17,985
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#12
that page is from 2003 .. back then people were proud of such designs
 

Frick

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
14,885 (3.45/day)
Likes
5,416
System Name A dancer in your disco of fire
Processor i3 4130 3.4Ghz
Motherboard MSI B85M-E45
Cooling Cooler Master Hyper 212 Evo
Memory 4 x 4GB Crucial Ballistix Sport 1400Mhz
Video Card(s) Asus GTX 760 DCU2OC 2GB
Storage Crucial BX100 120GB | WD Blue 1TB x 2
Display(s) BenQ GL2450HT
Case AeroCool DS Cube White
Power Supply Cooler Master G550M
Mouse Intellimouse Explorer 3.0
Keyboard Dell SK-3205
Software Windows 10 Pro
#13
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#14
Joined
Dec 2, 2009
Messages
3,257 (1.11/day)
Likes
315
System Name Mercury KM-81
Processor Phenom II x4 B50
Motherboard ASUS M4A89GTD PRO
Cooling Cooler Master Hyper TX3
Memory 6GB Ram (4GBx1 Corsair 2GBx1 Nanya)
Video Card(s) PowerColor AX6770 V2.0
Storage 2TB WD Black, 1TB Hitachi, 500 GB WD Blue
Display(s) Philips 247E-LPH 24" 1920x1080
Case Mercury
Audio Device(s) Integrated Realtek
Power Supply Corsair 750TX
Software Windows 7 64-bit
Benchmark Scores Maybe it is time to benchmark :D
#15
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
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(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#16