Moving header image & changing colour of title & tagline font

eg2014 · Member · Mar 8, 2016 at 6:49 am
Copy link

Add topic to favorites
Hi there,

I’d like to change the position of my header image. Its awkwardly placed at the moment and would prefer it to be behind the title and tagline. If this is possible, how can I also change the colour of the title and tagline fonts from black to white. What code can I put in CSS to accommodate these changes?

My website: mannersphotography.com

Many thanks.

The blog I need help with is: (visible only to logged in users)
michaelvandenberg · Member · Mar 8, 2016 at 9:59 am
Copy link
Howdie!

There is no easy way to change the position of the header image, but we can give elements a background image. So if we give the branding-menu element a background image with the same url as the header image that should do the trick:
```
.masthead .branding-menu {
	max-width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("http://mannersphotographydotcom.files.wordpress.com/2015/10/cropped-img_6287-114.jpg");
}
.masthead .branding {
	margin: 0 auto;
	max-width: 1140px;
}
```
I had to remove the max-width of 1140px to make the image fit, but I’ve added it to the another element so it should look the same.

As for the text, this will change the color to white. Note: I’ve added a very subtle shadow, but you can remove that line if you don’t want it.
```
/* Change branding text color. */
.masthead .branding h1.site-title a,
.masthead .branding p.site-description {
	color: #fff;
	text-shadow: 0px 0px 2px #000;
}
```
Let me know if this helps!

Regards,

Michael
eg2014 · Member · Mar 8, 2016 at 10:33 am
Copy link
That looks great, thanks Michael. If I wanted to change the new background image, I presume all I would need to do is to copy and paste a new URL?
michaelvandenberg · Member · Mar 8, 2016 at 11:55 am
Copy link
Glad to help! And yes, that’s correct. :)

No items found.