Adding gradient behind text on one page

Okay, I’m gathering that maybe I don’t want to bother with a generator.

How do I add an image as text-background?

Would you like your gradient to replace the white article background? You can do it but it will take a little work.

You’ll have to create a custom template, which isn’t as scary as it sounds. It would basically be a duplicate of your default template but you would add a CSS class or ID to whichever section you want the gradient on.

Then in your CSS file you add that class or ID and paste the CSS from ColorZilla.

Then you’ll go into your WordPress admin, open the Regional Services page and assign it the new template.

Thank you for the response!

That sounds like a good solution — not too scary, ha!

I read somewhere that Internet Explorer doesn’t render gradients…or doesn’t render them well anyway. That has me thinking I’d rather have a jpg serve as the background. Is that any simpler of a process?

Use CSS PIE related plugins for IE support
https://www.ads-software.com/extend/plugins/ie-css3-support/

Thank you both!

I’m still wondering if perhaps there isn’t a simple bit of code or plugin I could use to add an image to the text box background?

If not, then I’ll go ahead and make a template.

Okay…I made a new template and I have the CSS code from the generator…and I think I even know where it goes, but I don’t know how to write it in as a “class or id.”

Your text sits within:
<div class=”entry”>.

Find that line in your new template and add a class for your new background:
<div class=”entry gradient”>

Now open up your style.css file and add a new class for your gradient.

.gradient {
     ALL OF THE GENERATED CODE GOES HERE
}

*Note that your class doesn’t have to be called .gradient. It can be anything as long as it’s the same on your stylesheet as your page template.

Keith,

You are the man! Take a peek, its working great. I reckon that if I want the gradient to include those white areas I’d just have to move the <div class> around in the template file. I don’t have any content up there yet, but this is perfect.

Thanks again!

That’s awesome Jason. Way to stick with it! It looks like you have two entry divs in your template, which is fine if everything’s working, but here’s how you’d get your gradient to cover the rest of your white space.

<div class="entry"><!-- Add gradient class to this div -->
       <header class="entry-header">
          <h1 class="entry-title">Regional Services</h1>
      </header>
      <div class="entry gradient"><!-- Remove gradient class from this div -->
          <div class="entry-content">
          </div>
</div>