Why does jquery-ui-dialog uses both a background color and image for the overlay?

Question

jquery-ui-dialog uses an overlay div for modal dialogs. The div has this style:

.ui-widget-overlay {
  background: #AAA url(images/ui-bg_flat_75_aaaaaa_40x100.png) 50% 50% repeat-x
  opacity: 0.3;
}

Why does it specify both background color and image? Why not just a color?

Answer 1

I think it is safer to always apply a color along with the background image.

The browser could not support png format, or the request for the image could fail (for whatever reason).

The color on the other hand will always be applied. See it as a sort of backup plan :-)

---

Edit:

You actually do not require an image file to simply create a colored semi-transparent overlay. Just background-color and opacity are sufficient.

I think the exact reason is that jquery ui allows applying textures (you can choose them or disable them in the ThemeBuilder app on the jquery ui website. This is why the image is used, even when no texture is selected. No texture is actually the "flat" texture. You can actually see it in the name of the image file:

ui-bg_flat_75_aaaaaa_40x100.png

• flat = no texture, flat color
• 75 = opacity of the texture (using png alpha channel)
• aaaaaa = color of the texture
• 40x100 = size of the pattern

If you apply the "white-lines" texture to the overlay in the ThemeBuilder, it will generated image files with this name:

ui-bg_white-lines_75_aaaaaa_40x100

The first part of the answer is still valid but this is more the main reason in the case jquery ui.