Blog Banner

tequilainateacupsite · Member · Aug 7, 2016 at 7:54 pm
Copy link

Add topic to favorites
Hello!

This is my website that I need help with: https://tequilainateacup.com/

I was wondering if someone could help me with some code to move the header image of my blog to below the title. Ideally the image would still be above the menu.

In addition, I would also like to decrease the size of the image proportionally so that it is smaller than the title when underneath it.

Any help would be greatly appreciated!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 9, 2016 at 8:13 am
Copy link
Hi there, this can be challenging on responsive designed themes like Toujours and have it work on all device screen/window widths. The best way to do this is to add it as a background image to the site title div and hide the normal header image. Add the following to your custom CSS and see what you think.
```
.site-branding .site-title {
    background: url("https://tequilainateacupsite.files.wordpress.com/2016/08/cropped-blog-header-updated-412pm-copy.jpg") no-repeat scroll center bottom;
    padding-bottom: 10%;
    background-size: 50% auto;
}
.site-branding .header-image {
    display: none;
}
@media screen and (max-width: 500px) {
	.wf-active .site-title a {
		font-size: 2em;
	}
}
```
The last rule above is a Media Query that makes the font size of the site title smaller at 500px screen/window width and below. The works were breaking within them because the font was too large for tequila and teacup to fit on smaller screens.

No items found.