Question

I have this Jquery slider plugin for WordPress, and it’s just the jquery cycle plugin by Malsup.

Anyway, I added a caption in each slide. I just can’t find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:

.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}

I also tried using an absolute path to the png, but no go. Here’s the result:

As you can see, the caption in the bottom is almost impossible to read. It’d be cool if I could find a way to have like … this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!

Answer 1

I’d recommend not using images. One reason is that png images with transparent backgrounds don’t have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.

I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here’s my background example for you 🙂

background:rgba(200,200,200,0.5); //50% silver-ish background. 

You could use an opacity. But I wouldn’t recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it’s been a while since I’ve used them.

Here’s a further example for you 🙂

background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%); 
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.

using the webkit extensions respectively for the above example 🙂

I hope this helps.