changing header overlay png in digg 3

  • Author
  • #327627


    I’m trying to replace the header overlay png image for this blog. I see the code references another web site:

    <div id=”header-overlay”>
    <img alt=”” src=””/>

    How do I change this using custom CSS? I tried writing something like:

    position: absolute;
    width: 904px;
    height: 250px;
    z-index: -1;
    background: url(;

    (Only thing I added to the header-overlay was my new image that resides at

    It’s like I can’t get to the source code to change it in the html. Is there a way to do that? Sorry, I’m new to WordPress, and honestly I’m new to overlays too. Thanks in advance for the help.

    The blog I need help with is


    What is the URL of your blog?



    sorry, I thought it showed up automatically.


    The link to the header overlay you want to use, , gives me a 404 file not found error.


    #header-overlay controls the blog title (in the original theme), the RSS stuff and the search box and button. Using Firebug in Firefox, if I disable it, the above mentioned stuff disappears.

    What exactly are you trying to replace in the header area?



    Feel like such a novice here! The header overlay is actually

    I put the wrong address for you and in my code! But I fixed that, and now using that messes up my page. I’m basically trying to replace the little gray areas of the corners around the header. So the only way I knew to do this was to recreate this image (by coloring those corners the same light blue as my background) and then replace it.

    Is there a way to disable or replace the image coming from the site?


    I’m afraid I’m at a loss. I expect that the white background of the header area, along with the grey corners are a gif image, but I’ll be darned if I can find it.



    Hmm, if you go to you can see the entire image.

    I was thinking that if I replaced this image somehow on my server or another by redirecting the url, it could be done. I guess my question is how to do this within wordpress? Through CSS or HTML? It looks like it’s buried somewhere I can’t get to.

    BTW, thanks for your time on this!


    If you replace the URL in for a particular element in your CSS, then it overrides (should) the URL in the original CSS. I’m officially lost. I’ve never played with Digg and it is not straightforward with the header stuff.


    Perhaps someone else will come along that has more experience with Digg.



    That makes two of us! I’ll keep playing around. I think I almost have it because my image is showing up — just below the original overlay image, causing a repeat of the image — I just must have the syntax wrong or something.

    Anyone else wanna take a stab? Thank you!



    I’m basically trying to replace the little gray areas of the corners around the header.

    add this to your CSS code:

    #header-overlay img{display: none;}

    That should take those gray areas out.



    Bingo! I placed this code with the original that I had above (replacing the image) but I still had the other image (what I thought was the other image) repeating under it. Turns out, I put a “no-repeat” on my image and now it works! You can view this at:

    Sweetness. Thanks for all your help guys!



    Oh, and I meant to tell you, I still had to have my image showing up because if I didn’t there was only a header image and no rounded corners overlaying…


    Sweet! It looks much better now. Thanks for popping in one that Devblog.

The topic ‘changing header overlay png in digg 3’ is closed to new replies.