WordPress.org

Support

Support » Themes and Templates » Header image malfunctioning

Header image malfunctioning

  • 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.

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

    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);
    {

    Can anyone help?

    Michael

    @alchymyth

    Forum Moderator

    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.

    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?

    Michael

    @alchymyth

    Forum Moderator

    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

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header image malfunctioning’ is closed to new replies.
Skip to toolbar