WordPress.org

Ready to get started?Download WordPress

Forums

Image problems (16 posts)

  1. paultoner
    Member
    Posted 3 years ago #

    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

  2. JV Custom Designs
    Member
    Posted 3 years ago #

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

  3. paultoner
    Member
    Posted 3 years ago #

    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

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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'

  5. paultoner
    Member
    Posted 3 years ago #

    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

  6. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    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.

  7. paultoner
    Member
    Posted 3 years ago #

    Hi dremeda,

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

    Paul

  8. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    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.

  9. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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);
  10. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    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;
    }
  11. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  12. dremeda
    Sucuri Wizard
    Posted 3 years ago #

    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 :D

    Cheers mate!

  13. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    I like it because it's cleaner for me :D

    me too ;-)

  14. paultoner
    Member
    Posted 3 years ago #

    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?

  15. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  16. paultoner
    Member
    Posted 3 years ago #

    ok - thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.