Add Image to left of Title Text – Fabric Theme

[LocalSEODude]

I could create an Image to fill the space, but would rather learn how to add the image to the existing Header Text.

http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png
needs to be added to left of Title.

Is this done by editing CSS with something like background: url(http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png) no-repeat;

Does padding and align-left come into play?

Any changes needed in functions.php or can everything be handled in CSS?

Thanks!!

http://www.acornhos.com/

[Lauren @ OnceCoupled]

Can be done pretty much as you said. In your background shorthand, add positioning to the image, something like left center. Then add padding-left: 90px to it, in order to make sure the image displays without overlap.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[LocalSEODude]

Thanks Lauren!

Made some progress, but haven't been able to get the image off the left side, although I did get it to stop repeating.

Also, the description coding seems to be cutting image off.

Here's the current code (took out the align, float and padding codes as none of the ones I tried worked - even though I went through all the w3school's tutorials I could find on image alignment):

#title {
font-family: 'Pacifico', arial, serif;
font-size: 48px;
line-height: 60px;
margin: 0 0 5px;
text-shadow: #fff 1px 1px;
background-image:url('http://www.acornhos.com/wp-content/uploads/2014/04/Acorn-Home-Organization-Professional-Logo.png');
background-repeat:no-repeat;
}

[Lauren @ OnceCoupled]

Do you want it to be all the way on the left, or immediately left of the text?

If all the way left, just increase the property line-height to 85px.

If left of the text, use the #title a selector instead.

🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[LocalSEODude]

Tried both ways and went with your Property Line-Height Option.

One last question - to move it slightly off left edge, what float, align or padding code is needed?

Thanks!!

Scott

[Author]

Posts