• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

HTML/CSS - Background Image vs. Color?

Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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
27,028 (3.71/day)
Processor Ryzen 7 5700X
Memory 48 GB
Video Card(s) RTX 4080
Storage 2x HDD RAID 1, 3x M.2 NVMe
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 10 64-bit
the background image has a pattern, not a solid color
 
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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
27,028 (3.71/day)
Processor Ryzen 7 5700X
Memory 48 GB
Video Card(s) RTX 4080
Storage 2x HDD RAID 1, 3x M.2 NVMe
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 10 64-bit
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
18,923 (2.86/day)
Location
Piteå
System Name Black MC in Tokyo
Processor Ryzen 5 5600
Motherboard Asrock B450M-HDV
Cooling Be Quiet! Pure Rock 2
Memory 2 x 16GB Kingston Fury 3400mhz
Video Card(s) XFX 6950XT Speedster MERC 319
Storage Kingston A400 240GB | WD Black SN750 2TB |WD Blue 1TB x 2 | Toshiba P300 2TB | Seagate Expansion 8TB
Display(s) Samsung U32J590U 4K + BenQ GL2450HT 1080p
Case Fractal Design Define R4
Audio Device(s) Line6 UX1 + some headphones, Nektar SE61 keyboard
Power Supply Corsair RM850x v3
Mouse Logitech G602
Keyboard Cherry MX Board 1.0 TKL Brown
VR HMD Acer Mixed Reality Headset
Software Windows 10 Pro
Benchmark Scores Rimworld 4K ready!
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.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
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,351 (0.64/day)
System Name Dark Stealth
Processor Ryzen 5 5600x
Motherboard Gigabyte B450M Gaming rev 1.0
Cooling Snowman, arctic p12 x2 fans
Memory 16x2 DDR4 Corsair Dominator Pro
Video Card(s) 3080 10gb
Storage 2TB NVME PCIE 4.0 Crucial P3 Plus, 1TB Crucial MX500 SSD, 4TB WD RED HDD
Display(s) HP Omen 34c (34" monitor 3440x1440 165Hz VA panel)
Case Zalman S2
Power Supply Corsair 750TX
Mouse Logitech pro superlight, mx mouse s3, Razer Basiliskx with battery
Keyboard Custom mechanical keyboard tm680
Software Windows 11
Benchmark Scores 70-80 fps 3440x1440 on cyberpunk 2077 max settings
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
18,923 (2.86/day)
Location
Piteå
System Name Black MC in Tokyo
Processor Ryzen 5 5600
Motherboard Asrock B450M-HDV
Cooling Be Quiet! Pure Rock 2
Memory 2 x 16GB Kingston Fury 3400mhz
Video Card(s) XFX 6950XT Speedster MERC 319
Storage Kingston A400 240GB | WD Black SN750 2TB |WD Blue 1TB x 2 | Toshiba P300 2TB | Seagate Expansion 8TB
Display(s) Samsung U32J590U 4K + BenQ GL2450HT 1080p
Case Fractal Design Define R4
Audio Device(s) Line6 UX1 + some headphones, Nektar SE61 keyboard
Power Supply Corsair RM850x v3
Mouse Logitech G602
Keyboard Cherry MX Board 1.0 TKL Brown
VR HMD Acer Mixed Reality Headset
Software Windows 10 Pro
Benchmark Scores Rimworld 4K ready!
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
Last edited:

Frick

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
18,923 (2.86/day)
Location
Piteå
System Name Black MC in Tokyo
Processor Ryzen 5 5600
Motherboard Asrock B450M-HDV
Cooling Be Quiet! Pure Rock 2
Memory 2 x 16GB Kingston Fury 3400mhz
Video Card(s) XFX 6950XT Speedster MERC 319
Storage Kingston A400 240GB | WD Black SN750 2TB |WD Blue 1TB x 2 | Toshiba P300 2TB | Seagate Expansion 8TB
Display(s) Samsung U32J590U 4K + BenQ GL2450HT 1080p
Case Fractal Design Define R4
Audio Device(s) Line6 UX1 + some headphones, Nektar SE61 keyboard
Power Supply Corsair RM850x v3
Mouse Logitech G602
Keyboard Cherry MX Board 1.0 TKL Brown
VR HMD Acer Mixed Reality Headset
Software Windows 10 Pro
Benchmark Scores Rimworld 4K ready!
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
27,028 (3.71/day)
Processor Ryzen 7 5700X
Memory 48 GB
Video Card(s) RTX 4080
Storage 2x HDD RAID 1, 3x M.2 NVMe
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 10 64-bit
that page is from 2003 .. back then people were proud of such designs
 

Frick

Fishfaced Nincompoop
Joined
Feb 27, 2006
Messages
18,923 (2.86/day)
Location
Piteå
System Name Black MC in Tokyo
Processor Ryzen 5 5600
Motherboard Asrock B450M-HDV
Cooling Be Quiet! Pure Rock 2
Memory 2 x 16GB Kingston Fury 3400mhz
Video Card(s) XFX 6950XT Speedster MERC 319
Storage Kingston A400 240GB | WD Black SN750 2TB |WD Blue 1TB x 2 | Toshiba P300 2TB | Seagate Expansion 8TB
Display(s) Samsung U32J590U 4K + BenQ GL2450HT 1080p
Case Fractal Design Define R4
Audio Device(s) Line6 UX1 + some headphones, Nektar SE61 keyboard
Power Supply Corsair RM850x v3
Mouse Logitech G602
Keyboard Cherry MX Board 1.0 TKL Brown
VR HMD Acer Mixed Reality Headset
Software Windows 10 Pro
Benchmark Scores Rimworld 4K ready!
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
Joined
Dec 2, 2009
Messages
3,351 (0.64/day)
System Name Dark Stealth
Processor Ryzen 5 5600x
Motherboard Gigabyte B450M Gaming rev 1.0
Cooling Snowman, arctic p12 x2 fans
Memory 16x2 DDR4 Corsair Dominator Pro
Video Card(s) 3080 10gb
Storage 2TB NVME PCIE 4.0 Crucial P3 Plus, 1TB Crucial MX500 SSD, 4TB WD RED HDD
Display(s) HP Omen 34c (34" monitor 3440x1440 165Hz VA panel)
Case Zalman S2
Power Supply Corsair 750TX
Mouse Logitech pro superlight, mx mouse s3, Razer Basiliskx with battery
Keyboard Custom mechanical keyboard tm680
Software Windows 11
Benchmark Scores 70-80 fps 3440x1440 on cyberpunk 2077 max settings
Joined
Dec 27, 2008
Messages
587 (0.11/day)
System Name PC
Processor i5 2500k
Motherboard P8Z68-V PRO/GEN3
Cooling Fans
Memory DDR3-1600 (8GB)
Video Card(s) Sapphire Nitro+ RX 580
Storage HD103SJ
Display(s) XG2402
Case Xigmatek Midgard II
Power Supply PC Power & Cooling Silencer 750W
Top