Jump to content

Background of text not appearing


pcgameslab
 Share

Recommended Posts

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.KE8YoFt.png

Edited by pcgameslab
Link to comment
Share on other sites

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 by Day
  • Like 1
Link to comment
Share on other sites

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 by dsonesuk
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...