WordPress.org

Ready to get started?Download WordPress

Forums

Header image malfunctioning (8 posts)

  1. melissanorth
    Member
    Posted 3 years ago #

    Hi everyone,

    I have adapted a version of the Coraline theme, which I'm using here with eshop:

    http://limecrafts.com/shop/

    The header displays perfectly until you go into the product description- if you click Earrings in the menu, then click on the 'Happy Kitty studs' photo, this brings you to the product description post but for some reason the header displays the product image instead of the usual 'Limecrafts' header. I can see in the html using firebug and firefox that the img src points to the wrong image, but I don't know where the html file is kept or if you can edit it with WordPress- a quick google told me that WordPress does not allow access to the html.

    All advice welcome, as this is driving me nuts- I started with the 2010 theme altering the colours to suit, and had the same problem.

    Many thanks,

    Melissa.

  2. ChaMChoM
    Member
    Posted 3 years ago #

    hmm i see ur problem . try to add the header logo in the css . dont use the html.

    <img src="" alt"" />

    use css

    .logo { height:; width:; background-image: url(image path); float:left; }

    i hope u understand what i mean :)

  3. melissanorth
    Member
    Posted 3 years ago #

    The point is that I can't use the html, though!

    I have added the last line in style.css as follows- no change unfortunately:

    }
    #header {
    	float: left;
    	width: auto;
    	url(Logo.png);
    {
  4. melissanorth
    Member
    Posted 3 years ago #

    Can anyone help?

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

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

    this url(Logo.png); is not valid css.

    and please take care of the proper use of the brackets:

    #header { .... }

    it is always a opening bracket { followed by the styles, and then a closing bracket }

    otherwise the stylesheet is broken, and the result is chaos.

  6. melissanorth
    Member
    Posted 3 years ago #

    It still does it- this is my CSS now- you can see the problem here still:

    http://limecrafts.com/shop/?p=62

    #header img {
    	url('Logo.png');
    	max-width: 100%;
    	width: auto;
    	height: auto;
    }

    is there anything wrong with this?

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

    have you made any effort to read the link about using backgrounds in css?

    this line:
    url('Logo.png');
    is still no valid css;

    main mistake: your theme does not have an html image tag within the #header div - therefore your style will not work.

    try:

    #header {
    	background: url(http://full_path_to_image/Logo.png) center top;
    	padding-top: 50px; /*replace 50px with the height of your Logo.png image */
    	height: auto;
    }

    make sure you know where you saved the image; and use the same address that you would use to get the image to show in your browser.
    the spelling is important: Logo.png is not the same as logo.png

  8. melissanorth
    Member
    Posted 3 years ago #

    Yes, thankyou for the link. I didn't realise that it applied- I thought background images only applied to pages, not headers.

    I have tried it again, as follow, with a slightly different image. This keeps the header image static, but there is still an errant image at the top left of the product details page, which copies the featured product image, and I don't understand why this is happening.

    The path to the image in my browser is
    http://www.limecrafts.com/logo.jpg

    #header {
    	background: url('http://www.limecrafts.com/logo.jpg') left top;
    	padding-top: 100px;
    	background-repeat:no-repeat;
    	height: 100px;
    }

    Thankyou for your patience.

Topic Closed

This topic has been closed to new replies.

About this Topic