Add image next to my Site title

9thartwave · Member · Nov 9, 2015 at 1:12 pm
Copy link

Add topic to favorites
Hi, how can I add a pic next (left of my Site title) or replace my title with a pic?

thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 10, 2015 at 1:04 am
Copy link
Hi there, we can do either. Do you have an image prepared? If so, upload it to your media library and we can help get that into your site.
9thartwave · Member · Nov 10, 2015 at 2:04 pm
Copy link
hey, this is the image

I would like to check both options (replacing the title and have it on the left) to see what suits me best

thanks

thesacredpath · Member · Nov 10, 2015 at 7:12 pm

Thanks for the link to the image, give the following a try. The image links to your home page as the site title did before.

#branding #site-title {
    background: url("https://panosantonopoulosdotcom.files.wordpress.com/2014/09/stamp10.jpg") no-repeat scroll 0 0 /contain;
    display: block;
    height: 150px;
}
#branding #site-title a, #branding #site-description {
    color: rgba(0, 0, 0, 0);
}
#branding #site-title a {
    display: block;
    height: 150px;
}
#branding {
    width: 150px;
}

thesacredpath · Member · Nov 10, 2015 at 7:17 pm

And this puts the image to the left of the title and keeps the title and tagline/description.

#branding {
    background: url("https://panosantonopoulosdotcom.files.wordpress.com/2014/09/stamp10.jpg") no-repeat scroll 0 0 /contain;
}
#branding #site-title a, #branding #site-description {
    padding-left: 100px;
    display: block;
}

9thartwave · Member · Nov 10, 2015 at 7:50 pm
Copy link
perfect, many thanks. And how can I make the pic smaller?
thesacredpath · Member · Nov 11, 2015 at 6:26 am
Copy link
Super!

To make the image smaller, see where it says, /contain in the #branding background declaration? Replace “contain” with “auto 90%” so that it looks like this and then adjust the 90% value as desired.
```
#branding {
    background: rgba(0, 0, 0, 0) url("https://panosantonopoulosdotcom.files.wordpress.com/2014/09/stamp10.jpg") no-repeat scroll 0 0 / auto 90%;
}
```
If you make it smaller, you may want to reduce the 100px left padding in the second rule.

The topic ‘Add image next to my Site title’ is closed to new replies.

WordPress.com forums

Add image next to my Site title