CODEWITHSUNDEEP
csshtmlbackground-color
pragnesh
pragnesh

Reputation: 164

background-color is not working with div

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?

Upvotes: 1

Views: 6600

Answers (4)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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}*/;
}

Upvotes: 6

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

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 i.e,

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

and set the color. So use:

 background: yellow;

Upvotes: 0

ShibinRagh
ShibinRagh

Reputation: 6636

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)

Upvotes: 0

Kashif Naseem
Kashif Naseem

Reputation: 166

There is a white color background image in the jquery UI-library, add this line in your CSS to overwrite the css rule.

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

Upvotes: 2

Related Questions