7

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?

ripper234
  • 222,824
  • 274
  • 634
  • 905

4 Answers4

10

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.

Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
0

Just a guess, but perhaps it's for older browsers that lack PNG support or only 'partial' support for the effect they want to achieve, or for those who forget to copy the images across

SpaceBison
  • 3,704
  • 1
  • 30
  • 44
0

What you have is the CSS shorthand property to set the background. You could also write:

background-color: #AAA;
background-image: url(images/ui-bg_flat_75_aaaaaa_40x100.png);
background-position: 50% 50%;
background-repeat: repeat-x;

Since color is the first parameter in the shorthand version, it has to be specified. It takes effect if e.g.

  • the background-image is not found
  • or (in this case) the height of the element extends the height of the background-image
  • or your background-image contains transparacy.

If you just want to specify a color, you can either do this:

background-color: #AAA;

or that (the shorthand version with only one parameter):

background: #AAA;

the other parameters would be set to default then. If you want the same expresseion but without the image, you can do it like so:

background: #AAA none 50% 50% repeat-x;

Here's a quite decent explanation of this topic.

Quasdunk
  • 14,944
  • 3
  • 36
  • 45
  • there's probably some other explanation, as they also could define `background: inherit url(...` or `background: transparent url(...` if they would want to ignore the color. – kontur Jan 11 '12 at 09:03
  • @kontur That's right, but both `inherit` and `transparent` are valid values for the `color`-property. – Quasdunk Jan 11 '12 at 09:10
0

I think you can use choose semi-transparent png backgrounds for your widgets when you build custom jquery ui downloads. Thus making it important that the transparent parts have color below.

Edit: That is to say the theme builder is built to always include a color and a png, and to stick with these schemata, it includes a solid colored png if your texture is solid, as opposed to checkered or striped or gradient options.

See the difference between :

with semi transparent png

with solid png

kontur
  • 4,934
  • 2
  • 36
  • 62
  • How would that work differently than just a color with opacity? – ripper234 Jan 11 '12 at 09:17
  • You can't code stripes or checkers with opacity. Let's say you'd select red - okay, jqueryui builds you a background statement with solid color red and a png red. But if you'd specify red checkers, jqueryui builds you a background statement with solid red color and a png with semi-transparent checkers. That's why there is a "double" definition in the case of a solid color. [see the links I added to the answer] – kontur Jan 11 '12 at 09:21