CSS white or transparent background-color for div on white background?

css background-color

16,203

Solution 1

Simply don't set the background color in the shorthand declaration. You can skip it.
Saves on bandwidth, and css-browser-rendering-performance is kind of totally Dependant on the users/visitors browser!

Good luck!

Solution 2

Everyone's right suggesting that you leave off the declaration. It's good cascading.

However, you may want to declare it white when the interior element requires a white background - In which case it would be sensible to include it in the event this element will appear in other places.

The performance gains either way are largely unnoticeable I would say.

16,203

JackMahoney

Updated on June 04, 2022

Comments

JackMahoney almost 2 years
I work in front end and set CSS background using the shorthand notation very often. I was wondering for a div with a background image whose parent div has a white background - should the child have background-color white or transparent ? Which is better for performance?

ie:
```
<div id='parent' style='background:white;'>
    <div id='child' style='background:WHITE image no-repeat center center;'></div>
</div>
```
OR
```
<div id='parent' style='background:white;'>
    <div id='child' style='background:TRANSPARENT image no-repeat center center;'></div>
</div>
```
- Chad almost 12 years
  
  I would say don't set a background at all.
- BoltClock almost 12 years
  
  "Which is better for performance?" I can't think of any sensible reason why you would ask that, much less a sensible answer.
- JackMahoney almost 12 years
  
  @BoltClock Well I had assumed one had to specify a color in the shorthand notation and as it would have not visual difference I wanted to use the one that was less expensive. Seems like a reasonable question to me?
- GitaarLAB almost 12 years
  
  @BoltClock: I'm sorry, but I must agree with TS. Reason: caring about performance should always be encouraged in a coder. Asking 'stupid' questions makes TS and others learn (that in this case this was a 'stupid' question AND why this was not a 'sensible' chain of thought).
- BoltClock almost 12 years
  
  Why does the performance of a browser engine with respect to its implementation of a CSS property matter to a web developer? If it matters to anyone it's the browser developer.
- JackMahoney almost 12 years
  
  @BoltClock - What? You have 100,000+ reputation and you can't think why performance of a website might matter to a user?
- GitaarLAB almost 12 years
  
  @BoltClock : please do not take this the wrong way, but I to am baffled by this reasoning. For instance (NOT for ARGUMENT's sake): would you advise IE's css expressions to a novice coder, or css-filters where-ever possible? Furthermore, a 'webdeveloper' is a (to) broad field, where a lack of basic understanding on how things (like webservers, php/asp, html, css, javascript, json, ajax (just to name a few)) work together, result in a lot of questions here on SO and even more 'bloat' on the web. Should then a webdeveloper using this reasoning also ignore jsperf, since he's no browser-developer?