# Add a logo to your blog title

**URL:** <https://discuss.write.as/t/add-a-logo-to-your-blog-title/29>\
**Category:** Customization\
**Created:** [June 19, 2018, 3:31am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29 "2018-06-19T03:31:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [June 19, 2018, 3:31am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/1 "2018-06-19T03:31:01Z")

</div>

Pro users can add a logo to their blog header by uploading it to somewhere like [Snap.as](http://Snap.as) and adding a bit of CSS.

## Add a logo to your title

This will add a logo to the left of the blog title, as seen [on the Snap.as blog](https://we.snap.as):

```auto
#blog-title a {
 background: transparent url('https://snap.as/img/logo-mark-sm.png') no-repeat bottom left;
 padding-left: 42px;
}

```

(just replace `https://snap.as/img/logo-mark-sm.png` with the URL for your image, and adjust the `padding-left` to fit)

## Replace the title with an image

To replace the title with an image entirely, use this:

```auto
#blog-title a {
    background-image: url(https://snap.as/img/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
    display: inline-block;
    width: 200px;
    height: 50px;
    background-size: 200px 50px;
}
#post #blog-title a, #subpage #blog-title a {
    /* Change size of logo on post and tags pages */
    width: 100px;
    height: 36px;
    background-size: 100px 25px;
}

```

(be sure to replace `https://snap.as/img/logo.png` with your image URL and adjust the `width`, `height`, and `background-size`)

---

<div class="post-metadata">

**Author:** ![Aris](https://discuss.write.as/user_avatar/discuss.write.as/aris/32/58_2.png) [@Aris](https://discuss.write.as/u/Aris)\
**Post date:** [January 3, 2019, 8:40am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/2 "2019-01-03T08:40:16Z")

</div>

If you add this argument to `#blog-title a`

```auto
border-radius: 50%;

```

You have a smooth circle image…

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [February 4, 2019, 12:29am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/3 "2019-02-04T00:29:02Z")

</div>

What if I want to replace the title with a bigger image than the original title? Can I do that? Thank you!

---

<div class="post-metadata">

**Author:** ![fjhvio](https://discuss.write.as/letter_avatar_proxy/v4/letter/f/c0e974/32.png) [@fjhvio](https://discuss.write.as/u/fjhvio)\
**Post date:** [February 11, 2019, 10:41pm UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/4 "2019-02-11T22:41:27Z")

</div>

@Matt,

Recommendations:

1. For now, adding the code examples above to the [Customization Guide’s CSS section](https://guides.write.as/customizing/#custom-css).
2. Long term, making it as easy as changing your profile picture on Twitter. I spent a lot of time messing around trying to get it to work. Most normies are simply going to run the other way when they see CSS. Continue to let the purists use CSS, but let the normies just upload a profile pic like they can to most platforms without having to worry about technicalities.

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [February 27, 2019, 6:27am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/5 "2019-02-27T06:27:55Z")

</div>

Thanks. To clarify, I think you are saying I can make my title image larger by using CSS. Is that correct? Thank you.

---

<div class="post-metadata">

**Author:** ![fjhvio](https://discuss.write.as/letter_avatar_proxy/v4/letter/f/c0e974/32.png) [@fjhvio](https://discuss.write.as/u/fjhvio)\
**Post date:** [February 27, 2019, 6:58am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/6 "2019-02-27T06:58:30Z")

</div>

Yes. See the “width” and “height” parts in the code posted above and play around with it until you get the look you want.

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [February 27, 2019, 7:56am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/7 "2019-02-27T07:56:40Z")

</div>

Thank you, very much.

---

<div class="post-metadata">

**Author:** ![bix](https://discuss.write.as/user_avatar/discuss.write.as/bix/32/272_2.png) [@bix](https://discuss.write.as/u/bix)\
**Post date:** [June 10, 2019, 7:15am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/8 "2019-06-10T07:15:56Z")

</div>

It’s been awhile since I’ve delved too deeply into CSS. Is there currently a way to _add_ a logo (or avatar) rather than _replace_ the title with it? I’m speaking here of the fuller-size approach used here in the replace method, obviously, since the other method here is to put a tiny one next to the title. Trying to suss out a way to have, stacked, avatar/title/description on the collection page and then just the usual title on the post pages.

---

<div class="post-metadata">

**Author:** ![bix](https://discuss.write.as/user_avatar/discuss.write.as/bix/32/272_2.png) [@bix](https://discuss.write.as/u/bix)\
**Post date:** [June 10, 2019, 7:44am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/9 "2019-06-10T07:44:30Z")

</div>

This _seems_ to work (because instead of going to bed dead tired, I took out the laptop and tinkered).

```
body#collection #blog-title a {
background-image: url(image.png);
background-position: center top;
background-repeat: no-repeat;
display: inline-block;
width: 100%;
background-size: 125px 125px;
padding-top: 155px;
}

```

At least it’s doing what I want on [write.house/bix](https://write.house/bix/) at the moment.

---

<div class="post-metadata">

**Author:** ![huride](https://discuss.write.as/user_avatar/discuss.write.as/huride/32/4290_2.png) [@huride](https://discuss.write.as/u/huride)\
**Post date:** [October 25, 2024, 8:14am UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/10 "2024-10-25T08:14:35Z")

</div>

> [@matt](#):
>
> ```auto
> #blog-title a {
> background: transparent url('https://snap.as/img/logo-mark-sm.png') no-repeat bottom left;
> padding-left: 42px;
> }
> 
> ```

Has this changed? I get a blue weird something in the top right part of the title.

---

<div class="post-metadata">

**Author:** ![Crow](https://discuss.write.as/user_avatar/discuss.write.as/crow/32/3736_2.png) [@Crow](https://discuss.write.as/u/Crow)\
**Post date:** [October 28, 2024, 9:43pm UTC](https://discuss.write.as/t/add-a-logo-to-your-blog-title/29/11 "2024-10-28T21:43:45Z")

</div>

Matt - My theme has CSS that begins at the top (under the autor’s blurb) with:  
\*/

html {  
border-top: 12px solid #2E3440;  
border-bottom: 12px solid #2E3440;  
}  
Would your ADD Image LOGO code go above this with/without a space between?