CSS Text over Image

[BlakeN]

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/

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BlakeN]

Thanks for the insight Andrea!

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

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BlakeN]

Perfect! Thanks again Andrea.

Kind regards,
Blake

[Author]

Posts