Image problems

I don’t see any <img> or background-image to show a logo. Are you sure you put these in?

Hi JV,

Yes it’s called in the css, set as a background img of “logo h1 a”. there is a red border at the minute where it should be – top left.

thanks

that is not a valid path to your logo image:

#logo h1 a {
	border:1px solid red;
	background-image: url(wp-content/themes/clean-home/images/toner_digital_logo.gif) no-repeat;
	width:169px;
	height:70px;
	float:left;
}

try:

#logo h1 a {
	border:1px solid red;
	background-image: url(images/toner_digital_logo.gif) no-repeat;
	width:169px;
	height:70px;
	float:left;
}

assuming that your logo image is in the /images folder of your theme.

but – it is not there:
https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif
results in ‘page not found’

Hi alchymyth,

Thanks. I moved the image into the correct folder, and changed the path. I originally had the path you suggested but it wasnt working. I have amended all as you have suggested but still nothing. I know this is soo simple, but cant spot what im mising.

Paul

Can you try and upload the logo using the media uploader? It will provide you an absolute path on upload for you to use in your CSS.

Hi dremeda,

Surley The path should work though? not sure why its hapening.Ive never used the media uploader.

Paul

Yes, if it is accurate.

In your case, you should be calling it using the absolute path:

https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif

or call it from the theme directory which in your case, the logo is located at:

images/toner_digital_logo.gif

Calling the image from:

wp-content/themes/clean-home/images/toner_digital_logo.gif

will not work. It is an incorrect path and the css won’t know where it is looking.

Hope this helps.

my bad that i didn’t catch the wrong syntax the first time:

this line: background-image: url(https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif) no-repeat;
is not allowed to have the no-repeat in it;
it has to look like:
background-image: url(https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif);

the no-repeat goes into an extra line:
background-repeat: no-repeat;

https://www.w3schools.com/css/css_background.asp

with that correction, the full logo style should look like:

#logo h1 a {
	background-image: url(https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif);
         background-repeat: no-repeat;
	width:169px;
	height:70px;
	float:left;
}

and it should also work with the relative image path:

background-image: url(images/toner_digital_logo.gif);

There is no need to separate the background selectors, why not combine?

#logo h1 a {
	border:1px solid red;
	background: url(https://www.tonerdigital.com/wordpress/wp-content/themes/clean-home/images/toner_digital_logo.gif) no-repeat;
	width:169px;
	height:70px;
	float:left;
}

or even better:

#logo h1 a {
	border:1px solid red;
	background: url(images/toner_digital_logo.gif) no-repeat;
	width:169px;
	height:70px;
	float:left;
}

that is right – i was just pointing out, if one has seperate background selectors, then they have to be seperated properly.

i felt that introducing the combined shorthand background property might lead to more confusion.

that is why i quoted the w3school tutorial on the css.

Which is accurate and I wasn’t discounting at all, my apologies.

Both methods work, shorthand doesn’t do anything more for you than save a few extra characters in file size. I like it because it’s cleaner for me ??

Cheers mate!

I like it because it’s cleaner for me ??

me too ??

dremeda + alchymyth, thanks for the comments. Now sorted, for some reason it doesn’t like “background-image”, when I remove the “-image” all is well. Anyone know why?

i think this is explained in the exchange between me and @dremeda –

has to do with the shorthand property – here is the link again: https://www.w3schools.com/css/css_background.asp .

for instance:

background-image: url(images/logo.jpg);
background-repeat: no-repeat;

no shorthand = only one parameter ‘per line’.

background: url(images/toner_digital_logo.gif) no-repeat;
shorthand = many parameter.

ok – thanks