Adding custom logo with CSS instead of using header image

For the header, I wanted to use an image that has both text & image as a logo/header but when I upload it via the theme itself it crops on mobiles. I’ve read in the forums that there’s no way around this in Expound except to add a custom logo via CSS, so I’ve tried doing that but can’t get it to work. The image doesn’t show up.

This is the code I’m using, in the Custom CSS Manager plugin, based on Konstantin’s answer to previous askers of this question:

.site-title a {
color: transparent;
display: block;
background: url(‘https://www.spunkymisfitgirl.com/wp-content/uploads/2015/07/Spunkycropped.jpg’) 0 0 no-repeat;
width: 691px;
height: 154px;
text-indent: -9999px;
}

The width & height are the image size; is that correct? Are there limitations on what size it can be?

My site is here: https://www.spunkymisfitgirl.com/

I mainly just want it to look right on mobiles as well as on a computer so I am open to other suggestions as to how to make that work.

I’m not a programmer so please explain in detail. Thank you!