Unwanted gray bar in middle of header image

You can fix this by adding the following to your style.css:

#site-header #headerText h2 {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);
padding: 11px 22px;
font-size: 32px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
color: #ffffff;
}

Best way, though, is to either create a child theme and add it to the child theme’s style.css, or add a plugin like “Simple Custom CSS” and add it there. That way, when you get updates to your theme, it won’t break the fix.

Looks like it’s space for some header text being styled with CSS – so try ADDING this to your custom CSS to hide it:

#site-header #headerText h2 {
    display: none;
}

You just have a giant CSS background image for the text “MediaSmart”, but you know that won’t be read out for non-human things like robots (Google) and assistive technologies right?

Do provide the text description for the image, and like WPyogi said hide it off the screen but do so in a way that it’s available to all technologies:

#headerText {
    direction: ltr;
    left: -999em;
}

(It’s already positioned absolute)

Thanks, Augustin56 – I just grabbed Simple Custom CSS. WPyogi, the code you provided did the trick…so thanks for that!

Andrew – I’m a complete CSS novice. In order to remedy the problem you bring up, what kind of description should I give it, and exactly where?

Thanks to all three of you for the replies.

Your theme has an option somewhere to add text to this image. We can help you with things like CSS, but not with things like where to find this option in the dashboard, because you’re not using a theme we support.

If you did find the option to put in text to this image, just put in the equivalent of what you see, e.g. “MediaSmart”.

Then instead of WPyogi’s code add this:

#headerText {
    direction: ltr;
    left: -999em;
}

Got it. Thanks again for the help!