Can I add an image to the site title section of twenty eleven theme?

vtcounseling · Member · Aug 1, 2013 at 4:18 pm
Copy link

Add topic to favorites
Hi,

I’m considering using a logo for my business and was wondering how to add it to the site title. I’d like to move the existing title over to the right and insert the logo to it’s left, close to the title. I have heard that this could be done by adding a background image and received this code:
#banner {
background: url (‘logo url’) no-repeat;
background-position-x: -15px;
background-position-y: 15px;
}

Do I just add the url to my logo image into this? —> (‘logo url’)

Thanks in advance for your help!

The blog I need help with is: (visible only to logged in users)
justpi · Member · Aug 1, 2013 at 4:32 pm
Copy link
As I just explained in the other thread, the above code is incorrect.

First step: you create a version of the image in the appropriate pixel dimensions, upload it to your blog via Media > Add New, then click Edit, copy the image URL from the File URL field of the Save module, and paste the URL here so we can see the image and work out the CSS.
vtcounseling · Member · Aug 1, 2013 at 5:38 pm
Copy link
Okay, here it is:

http://vtcounseling.com/about/vcc-logo-8_1_13_3/
mrdirby · Member · Aug 1, 2013 at 7:45 pm
Copy link
Justpi might approach this differently but here is how I would do it.
```
#branding {
background: url('http://vtcounseling.files.wordpress.com/2013/07/vcc-logo-8_1_13_3.jpg?w=51') no-repeat;
background-position: 15px 25px;
}
```
Then adjust your margin of the title and description.
```
#branding hgroup {
margin: 0 0 0 85px;
}
```
You can adjust the spacing as you like it.
vtcounseling · Member · Aug 1, 2013 at 9:32 pm
Copy link
wow….really great to be able to try things like this to get this site exactly right for me. thanks mrdirby!
mrdirby · Member · Aug 1, 2013 at 9:49 pm
Copy link
Looks good. Happy to help!
justpi · Member · Aug 2, 2013 at 12:24 am
Copy link
As mrdirby implied, this can be done in various ways. Here’s my variant:
```
#branding {
    background: url("http://vtcounseling.files.wordpress.com/2013/07/vcc-logo-8_1_13_3.jpg") no-repeat scroll 7.6% 1.9em transparent;
}
#site-title, #site-description {
    margin-left: 61px;
    margin-right: 180px;
}
```
Change the 1.9em to adjust the vertical positioning of the logo. Change the 61px to adjust the space between logo and title.
vtcounseling · Member · Aug 2, 2013 at 12:47 pm
Copy link
Justpi…I can use all the information I can get to learn more and get better at this. As always, thanks for your time!
Kim.

No items found.