background-color is not working with div

Question

I am trying to set background-color for div element "High Tatras" "High Tatras 2"...elements to yellow with css.

gallery li {background-color: yellow;}

jsfiddle demo http://jsfiddle.net/pragnesh/CjDDB/

But background-color yellow only applied to top and bottom part of element.

What could be problem with this code?

Answer 1

jquery-ui seems to have a weird multiple background css rule (lol it's not a multiple background... just the comments threw me off... it's late). Try using just the background attribute instead:

.gallery li {
    background: yellow;
}

Demo: http://jsfiddle.net/j2TtX/

The rule that is causing the background is this one:

.ui-widget-content { 
    border: 1px solid #aaaaaa/*{borderColorContent}*/;
    background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
    color: #222222/*{fcContent}*/;
}

Answer 2

jQuery UI库中有白色背景图像，请在CSS中添加此行以覆盖css规则。

.gallery li.ui-widget-content{background-image:none;}​

Answer 3

Overrating this background that is the issue , You should remove background property in this class ".ui-widget-content"

.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #222222;
}

It comes from jquery-ui.css (line 243)

Answer 4

Here is Working Code

Problem is once you set the background-image for a div then you can not override it via background-color because it only set only color property(which has low priority than image) while background property will reset all background related properties ie,

1. background-color
2. background-image
3. background-position
4. background-repeat
5. background-attachment

and set the color. So use:

 background: yellow;