Change Header Text to Header Image

You can probably target the header with CSS and set its background property to an image like I did on https://wpmag.ru

Did not work. Now the header text is above the image it self. for some reason the header text and subtext wont go away and its bumping the header.
Nothing I do will fix this. I have tried editing code, I cant even remove the header text…..
When i go to appearance and try to put a header image in there, wont work…

First of all, revert all the changes that you have made directly to any theme file to its original. Create a starter child theme to hold your modifications.
https://codex.www.ads-software.com/Child_Themes

Make sure child theme is installed, activated, and works properly.

Since the logo that you want replacing the title text will span full to the entire header area, this 2 steps below will do what you want.

Put this in your child theme’s stylesheet.

/*----- hide .site-branding keeping SEO -----*/
.site-branding {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);  /* IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/*----- parent already has responsive img style  -----*/
.mylogo { display:block; }

Put the linked logo img tag just after the opening <header> like this.

<header id="masthead" class="site-header" role="banner">
<a rel="home" href="https://example.com/">
	<img class="mylogo" alt="mysite" src="https://dummyimage.com/1020x200/0000ff/fff.png">
</a>

To look good, the logo image must be 1200px in width, any height.

Forget all that. I got mine to work, by pasting a code in my setting/editor/theme.php someone has it here, just look around, a guy posted it. Mine is working good. Can’t move grey bar, but so what. for free its as good as it gets. stop trying to customize it.

You don’t really have to edit any of the theme’s code, CSS will suffice. Here’s an example:

.site-title a {
    background: url('https://url-to-your-logo.png') 0 0 no-repeat;
    width: 300px;
    height: 120px;
    text-indent: -9999px;
}

Enjoy!

Nice one thanks Konstantin

You’re welcome!

@kosuki Unless you don’t care for SEO, taking out Site Title and Site Description text from header.php is a wrong decision because they are in <h1> and <h2>.

Also, the header image, as it is now, is messing up the responsiveness of the site.

And the changes must be done via child theme, not directly to the theme itself, you will lose all the custom works when theme updates.

CSS code works, but there is an indent on the image. How can the header be just the image without a border indent padding?

@ubo, Custom Header support is coming with the pending update to the theme. Stay tuned!

Maybe a silly question but can you only change design using CSS codes if you buy the Custom Design upgrade? I want to change my text header to image header but have NO idea how to go about it.

Looks like you’re referring to the Custom Design upgrade over at WordPress.com? The Expound theme is currently not available to WordPress.com users. Expound is available to self-hosted users using the software from www.ads-software.com.

If you’d like to alter the CSS of your theme on a self-hosted www.ads-software.com blog, you can easily do it with any Custom CSS plugin at no extra charge, for example: https://jetpack.me/support/custom-css/

Thanks @konstantin, you have been super helpful. I am using www.ads-software.com so will give CSS a go … hopefully I don’t get too stuck trying to figure out how to code!

Hi, I have a question related to this topic. I’m new to WordPress but not to CSS (intermediate skills). What would be the pros and cons of editing my Child Theme’s style.css file on my own, vs. using a Custom CSS plugin like jetpack, if I’m using expound as my parent theme?

Karis0166, it’s mostly just a matter of preference. For style.css you’ll have to deal with an actual file, use FTP, version control, etc. For Custom CSS you do it all within the admin, have file revisions, etc. Pick whatever works best for you, and it won’t hurt to switch at any given time.