Background of text not appearing

[pcgameslab]

There's a carousel at the top of this blog,a kind of slider just below the menu containing text like Home,Suggestions etc. and there is text background added on the text appearing over the images it appears behind the text but not the way I want.I want it to appear in the following way,how to do it.

Edited June 21, 2014 by pcgameslab

[Day]

Try replacing your link styles with this:

#carousel ul li a.slider_title {  background: rgba(0,0,0,.7);  color: #fec700;  text-align: center;  font: normal 13px Oswald;  display: inline-block;  padding: 3px 0;}

I changed the background to rgba(0,0,0,.7) which sets the red, green, and blue values to 0 which is black and then sets the alpha (opacity) to .7 (70%).

 

I added display inline-block to make the background expand around the text's box model instead of just highlighting the text.

 

Lastly I added some padding to give a little breathing room on top and bottom of the text and to take up the rest of the height not already being used by the thumbnail div.

Edited June 21, 2014 by Day

[dsonesuk]

does not work with single line or small amount of text because padding blackground color is to text content, it should be to the area the text is in.

 

maybe

#carousel ul li{position: relative;}#carousel ul li a.slider_title {display: block; position: absolute;background: rgba(0,0,0,.7);top:85px;left:0;right:0;bottom:0;padding: 0 3px;}

Edited June 21, 2014 by dsonesuk

[pcgameslab]

Thank you to both of you guyz,it is working now,it worked by combining the css that you both gave me.