Site title logo

concertified · Member · Feb 4, 2016 at 12:56 am
Copy link

Add topic to favorites
Hi,

I would like to replace the site title with a background-image, seeing as thats seems to be the only way to get my site title in a custom font that I have installed on my laptop.

How do I go about doing that? How big should I make the image?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 4, 2016 at 7:55 am
Copy link
Are you wanting to replace the site title and the site description or just the site title? If just the site title, upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.
```
.site-title {
    color: rgba(0, 0, 0, 0);
    background: url("URL_OF_IMAGE") no-repeat scroll center top transparent;
}
```
If the title and description, then this would be the code.
```
.site-title, .site-description {
    color: rgba(0, 0, 0, 0);
}
.site-branding {
    background: url("URL_OF_IMAGE") no-repeat scroll center top transparent;
}
```
thesacredpath · Member · Feb 4, 2016 at 7:56 am
Copy link
Sorry, I should also mention that the above could require further work since I don’t know the size and proportions of your logo.
concertified · Member · Feb 22, 2016 at 3:38 pm
Copy link
Thank you so much! my logo is 235x27px. It becomes a problem when viewing the site on a mobile screen. It cuts out the first and last letter. if I set the width and height, I can see the whole logo but then it’s not centered instead. How do I solve this?
thesacredpath · Member · Feb 22, 2016 at 10:34 pm
Copy link
Hmmm, there are a couple ways to fix this and I’ve been thinking about the best way to do it. Add this to the very bottom of your custom CSS and see what you think.
```
@media screen and (max-width: 767px) {
	.site-branding {
		max-width: 90%;
	}
}
```

No items found.