5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Text over slider image- need to use transparent text?

by peterj02460
4 replies
  • WEB DESIGN
    • |
I am trying to enter text to display over slider images in a website. I am using a Wordpress theme that gives me the option to display a short blurb of text for each slider image it displays in the top left of the image, then when you reach a certain point, you get a Read More button. The photos in the slider are multi colors and I can't figure out how to get the text to display where it is readable- if the text goes over a black part of the photo you can't see the text if it is dark, same thing with light colors, if the text is light, you can't see it in those areas of the image that are light.

I assume someone has had this problem before and there might be fonts/html colors that are made for this?

Thanks for any help!
#image #slider #text #transparent
  • Profile picture of the author ClicProject
    just add a semi-transparent black .png image as a background to the text.
    {{ DiscussionBoard.errors[6888539].message }}
    • Profile picture of the author Brandon Tanner
      You could wrap the text in its own div, and give that div a solid background color which contrasts the text color. For example, this would display white text over a black background...

      <div style="background: black">
      <p style="color: white">Your Text</p>
      </div>

      And if you use CSS3, you can alter the transparency level (opacity) of the background color and/or text. CSS3 is not supported on older versions of IE, but if you still want to know how to do it...

      A brief introduction to Opacity and RGBA - CSS3 . Info
      Signature

      {{ DiscussionBoard.errors[6888898].message }}
  • Profile picture of the author Dan Grossman
    Put the text in a container with a background image. The image should be a solid black or white pixel (which will automatically tile), with its opacity somewhere between 5% and 50%.

    Here's an example. This black text is in its own div, with a background image set to a 50% opaque white dot, and some padding.



    The lower the opacity, the more of the slider image shows through. The white provides the contrast so that black text doesn't blend into a black background.
    Signature
    Improvely: Built to track, test and optimize your marketing.

    {{ DiscussionBoard.errors[6888953].message }}
    • Profile picture of the author peterj02460
      Thank you very much for your replies! I am experimenting now with your suggestions- I really appreciate your help!
      {{ DiscussionBoard.errors[6889024].message }}

Trending Topics