CSS Text over Image

Community Forums Forums Design Tips and Tricks CSS Text over Image

This topic is: resolved

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  BlakeN 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #71350

    BlakeN
    Participant
    Post count: 17

    Hi,

    I am attempting to simply place text over an image and alter the styling of the H tags in various instances. If you take a look at the homepage you can see where this is not exactly falling into place. Here is the code I used:

    <div style=”position: relative; background: url(http://directmktg101.com/wp-content/uploads/2013/10/Mailing-List-companies.jpg); width: 1140px; height: 300px;”>
    <div style=”position: absolute; bottom: 130; left: 72px; width: 350px; font-weight: bold; font-size: 30px; text-align: center; color: #fff;”><h2><p>Trusted Mailing List Specialists</p></h2>
    </div>
    <p style=”position: absolute; bottom: 70px; left: 72px; width: 350px; color: #357291; font-size: 28px; text-align: center;”>We have proudly served over 100,000 customers</p>
    </div>

    It did not pick up the styling or positioning elements.

    Any help is greatly appreciated.

    Kind regards,
    Blake Newton

    http://directmktg101.com/
    #71357

    nutsandbolts
    Keymaster
    Post count: 3202

    Here’s a tutorial that should help you. It was written for the Minimum child theme but will work basically the same for any child theme: http://www.carriedils.com/text-overlay-image/


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71856

    BlakeN
    Participant
    Post count: 17

    Thanks for the insight Andrea!

    What would be the best way to code an override of the styling elements for H tags?

    #71860

    nutsandbolts
    Keymaster
    Post count: 3202

    You can target the exact area you want to alter through CSS – I can’t see them right now because I’m only getting a slider shortcode on your homepage, but if you put those elements back in place and let me know, I’d be glad to take a look. If you’re using a widget area, you can usually do it that way. So if the widget area is Home Top, for example, you can do something like this in your stylesheet:

    #home-top h2 { 
            font-weight: bold;
            text-align: center;
            color: #fff;   
    }

    and so forth until all the rules are in place. If something doesn’t take effect, it means something else in the stylesheet is overriding it, but you can usually add !important to your rule to force it to work. So if the h2 headline didn’t show up in white like you wanted it to, you could alter that to say color: #fff !important; and that should get it working.

    I hope that makes sense. As I said, I’d be happy to help if you still need it.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72097

    BlakeN
    Participant
    Post count: 17

    Perfect! Thanks again Andrea.

    Kind regards,
    Blake

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.