Header Area Image instead of Text Help!

Hello all!

Currently I am trying to insert the art file http://isfulfillment.com/testspace/wp-content/uploads/2010/08/logo-1.png in the field where header plain area plain text is.

You can get a good visual of what I am trying to describe by visiting the site @isfulfillment.com/testspace

To change this field the standard way provided by the theme you go to Customize > Header Area > Header text > Header text

The problem with this is that I am unable to put in the art file. I have tried doing

As well as other variations but it seems this field is locked to text only and does not read the html code whatsoever.

Therefore, I have tried to create a work-around by creating a text section widget at the beginning of the home page. In this section I have inserted the image and formatted it so that it is positioned where the header text would usually display.

The problem is now that depending on the screen resolution, this image changes places and moves away from where it should be positioned.

I understand the general concept of media queries, however, Iā€™m not sure what the correct class id would be to assign my div to to get it to properly display or even if this is the proper solution to my issue in the first place.

I am also aware that there is an area for the header image, however, this section has a default header overlay which darkens the image (and of which I would like to retain its effect) so simply pasting the logo ontop of the header image in photoshop is not a valid solution.

Any help to get me on the right track for all this would be GREATLY appreciated!

Thank you

Hello @apwilliams,

You can darken header image in image editor, add logo, and use the following CSS code to remove overlay.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard ā†’ Appearance ā†’ Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

.header-image::after {
    background-color: transparent !important;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.