Jump to content
pcgameslab

Background of text not appearing

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...