Blog Header Title/Picture

Support
#1

Is there a way to use a picture instead of text only for the blog header? Looking to use a picture instead of the words here on this page - http://www.decrenew.com/blog/

#2

Hi @MikeMobley2002,

Thanks for writing in.

You can use CSS to use image for your blog header. Use this code in your custom CSS:

.x-header-landmark {
margin: 0px auto 0;
height: 150px;
background-color: #000000;
background-image: url('http://www.yourwebsite.com/yourimagelocation.png'); 
}

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hey Nico,

Couple of things…the file we are using doesn’t “repeat” itself but you can see on this page how it is.

Also how can we move it down a little bit and have the background be clear?

#4

Got how to move it down. So comes down to these 3 things:

  1. How to make background clear?

  2. How to make png picture itself not repeat…it shouldn’t be and you can see that because the URL in the CSS points to here - http://www.decrenew.com/wp-content/uploads/2017/08/ruthie-tagline.png

  3. How to make this responsive? So if you are on the mobile device, you can still see the pic?

#5

Hi,

Kindly change the css code to this.

.x-header-landmark {
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20px auto 0;
    height: 103px;
    background-color: transparent;
    background-image: url(http://www.decrenew.com/wp-content/uploads/2017/08/ruthie-tagline.png);
}

For more information regarding backgrounds kindly refer to the link below

https://www.w3schools.com/css/css_background.asp

Hope that helps.

#6

Perfect thank you! Last question, how can I center it?

#7

Hi There,

Add a background-position: center; property to the custom CSS that Paul’s given.

Thanks,