Support » Themes and Templates » Image problems

  • Hi Guy’s,

    Quick query. Could someone have a look at my site:

    http://www.tonerdigital.com/wordpress

    For some reason the logo is not appearing though the link and border I have added to it is? Not sure if im missing something simple, though the image is uploaded to linked to relevant file.

    Thanks in advance,

    Paul

Viewing 15 replies - 1 through 15 (of 15 total)
  • 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

    Michael

    (@alchymyth)

    Forum Moderator

    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:
    http://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:

    http://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.

    Michael

    (@alchymyth)

    Forum Moderator

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

    this line: background-image: url(http://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(http://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;

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

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

    #logo h1 a {
    	background-image: url(http://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(http://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;
    }
    Michael

    (@alchymyth)

    Forum Moderator

    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!

    Michael

    (@alchymyth)

    Forum Moderator

    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?

    Michael

    (@alchymyth)

    Forum Moderator

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

    has to do with the shorthand property – here is the link again: http://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

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Image problems’ is closed to new replies.