Adding a picture above blog title

Help Customization
1

Hey,

Total newbie looking for some help. I’m using the theme Marfa and would like to add a picture above the blog title on the front page.

TIA

Dave

2

Hello! You can do this with some javascript and css magic.

First, add the javascript:

/* BEGIN HEADER IMAGE */

let img = document.createElement("IMG");
img.setAttribute("class", "header-img");
/* CHANGE URL HERE */
img.src = "https://via.placeholder.com/350x65";
document.body.prepend(img);

/* END HEADER IMAGE */

then add the CSS:

/* BEGIN HEADER IMAGE */

.header-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}

/* END HEADER IMAGE */

An explanation:

We create a new html element with javascript using createElement, then we set the appropriate class (so that we can style with css), add a source url (change it) and prepend it to the document body, so that its on top of the page. Keep in mind that this will be above everything added before this.

Then we style it with css so that its centered and not hugging the titlebar. You can change the “margin-top” value as you please, try it out and see what pleases you - increase or decrease the number before “em”.

6 Likes
3

Awesome. Thank you for your help. The picture loads up and is correctly aligned. I had to work out how to size the picture to its 250x250, but that was google-able :slight_smile:

My next question is: is it possible to have it only show on the front page? When its site wide, it throws off the layout of the other pages.

4

Hey @x0darkpadr3! To remove the picture on the post pages, you can add the below code to your Custom CSS. It will only leave the header image on the front page.

#post .header-img {
    display:none;
}

Hope that helps!

2 Likes
5

Hi CJ,

A quick follow up on my previous before… how do I do the same with the tag page? I tried to work it out but with no success.

TIA

Dave

6

Hi. Can I add a photo below the blog title and “menu” (and above the blog posts)?

Also, I really want to create a custom header. Can anyone suggest a resource for learning how to do that? I’m not that technical. Or should I just go somewhere like Fiverr? This stuff is not my strong area.

8

canva.com
you can make a lot of stuff there with a free account.

9

Thanks, bforbaker.

10

Do you know how to align this image to the left so its above the text or align the text back to center?