• Hi All,

    I’m trying to upload a custom header image that I made onto my site lauraamannwriting.com, but I’m just getting a broken image.

    The path for the image is: http://www.lauraamannwriting.com/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg

    At this point I have this in the stylesheet:

    #header h1 a {
    background: url(/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg) no-repeat left bottom;
    height:140px;
    width:800px;
    }

    and this in the header.php:

    <h1><img src=”?>/http://www.lauraamannwriting.com/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg” width=”800″ height=”140″ /></h1>

    I’m learning all this and really don’t understand the different code tags and what needs to be in the stylesheet and what needs to be in header.php. Please help, it’s driving me nuts. Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • <h1><img src="?>/http://www.lauraamannwriting.com/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg" width="800" height="140" /></h1>

    This should look like:

    <h1><img src="http://www.lauraamannwriting.com/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg" width="800" height="140" /></h1>

    Thread Starter sidge

    (@sidge)

    Thanks! Worked! Do you know what code to add to make it stretch across the browser?

    It depends on what you mean by stretch… do you mean stay in the middle of the browser?

    If so you would apply something along the lines of the following CSS:

    h1 img {
        width: 800px;
        height: 140px;
        margin: 0 auto;
    }
    Thread Starter sidge

    (@sidge)

    I guess I mean fill up the browser, no matter what size it is, so there isn’t that blank space on the top right. I tried what you wrote above but it didn’t work.

    hi sidge,

    Try this:

    CSS

    #header h1 a { background: url(images/wc_header.jpg) no-repeat left bottom; height:140px; width:100%; }

    header.php

    <div id=”header”>
    <h1><img src=”http://www.lauraamannwriting.com/wp-content/themes/wpesp-portfolio/wpesp-portfolio/style/images/wc_header.jpg&#8221; width=”800″ height=”140″ /></h1></div>

    In CSS, the body id is set to width: 100%, stretching across the site page. Your header has to match this width to stretch across.

    Let me know if this works.

    Thread Starter sidge

    (@sidge)

    Ok, now it does move across the screen to be basically centered in the browser, no matter what size it is, but the size of the header doesn’t change. I want that whole gray space to be filled with the header no matter the size of the browser. ??

    ok, that part is done.

    in the <h1> code above, change the width and height to 100%.
    in the css change height to 100%.

    If that doesn’t work, then you need to re-size your image and upload it again.

    Thread Starter sidge

    (@sidge)

    Thanks, Nina. Changing the height to 100% makes the header expand to almost the entire height of the browser, but increasing the image px size doesn’t seem to change the size of that grey border around it, just makes the header image bigger, too. Any other ideas?

    you’re welcome. I’m new to Worpress myself, but I solved a similar issue with my site so I thought I could help.

    another fix might be to remove the image code above from the header.php and have the css call it from your media files.

    1. upload the image to your media files
    2. then copy the link that shows up at the bottom of the page
    3. save the image
    4. in css, include the following:

    #header { background:url(this is where you paste the image url); width: 100%; }

    if that doesn’t work, you might want to request support from an advanced user in the forum.

    Thread Starter sidge

    (@sidge)

    Having nothing in the header.php made the image disappear completely. Doesn’t it need to be in that file? Anyway, I think I’ll just accept that it’ll have a border for now and move on. But now I’m trying to align the menu bar with the header, and I can’t figure out how to code it so that the 2 are always in line, aka the menu is relative to the header. Any ideas on that one?

    I cant get my custom header that I created in my original blog site to transfer with the other files. and none of my videos play on my site since the ftp transfer. this http://freestylemixtapesmyblog.wordpress.com/category/freestyles

    this is what the new site looks like http://www.freestylemixtapes.com can someone please help me

    I could play the video on your home page, so I guess you fixed that.

    As for the header, it probably transferred, but the url needs to be updated in css header tag and/or header.php.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘WPESP Header Problems’ is closed to new replies.