Linking background image to home page

bakingsociety · Member · Apr 27, 2011 at 9:33 pm
Copy link

Add topic to favorites
hi,

i need to link a background image back to my home page. here is the code for the background image:

#header {
background:url(‘http://bakingsociety.files.wordpress.com/2011/03/header.gif’) no-repeat scroll 0 0 transparent;
clear:both;
float:none;
height:344px;
padding-top:0;
text-align:center;
width:1182px;
margin:0 auto;
}

what code should i use to link that back to the home page?

thanks so much for your time!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 28, 2011 at 4:55 am
Copy link
You cannot do that directly from the CSS. You have to create a transparent PNG image (no color whatsoever), put it into a text widget with it linked to the home page, resize the text widget to the size of the image and then use position:absolute and top and left declarations to move it to the top of the site over the header image. I would suggest making the image no more than 240px tall so there is no chance of it interferring with your navigation. You might have to also use a z-index of 1 if it happens to slip behind the header image, which depending on how the elements and CSS are structured can happen.
bakingsociety · Member · Apr 30, 2011 at 2:36 pm
Copy link
could you help with the positioning code of the widget?? i’m not sure what to code to move it to the top of the page centered over the header graphic. also, the code for the z-index incase i need to use that.

thanks again!
thesacredpath · Member · May 1, 2011 at 6:17 am
Copy link
Have you got the widget in the sidebar now?
bakingsociety · Member · May 1, 2011 at 3:26 pm
Copy link
yes, i put the text widget at the bottom of the side bar and added this link inside:

not sure how to make that a link and move it up with the header image.

thanks for your help!
thesacredpath · Member · May 1, 2011 at 7:49 pm
Copy link
This is what you need to put into the text widget so that the image is linked to your main site page.

<a href="http://bakingsociety.wordpress.com/"><img title="" src="http://bakingsociety.files.wordpress.com/2011/04/transparent_link.png" alt="" /></a>
thesacredpath · Member · May 1, 2011 at 8:21 pm
Copy link
The following should do it, but this should be checked in all browsers. IE should not have a problem with it, but with IE, you never know.

I’ve set a height for the text widget of 250px so that it does not overlap your navigation buttons.
```
#container {
position: relative;
}

#text-8 {
height: 250px;
left: 50%;
margin-left: -500px;
position: absolute;
top: 0;
width: 1000px;
}
```
One other note: IE6 has an issue with transparent PNG’s (doesn’t understand them even a little), and if wordpress has not included the PNG fix in their system, IE6 users will see the transparent PNG you created as a white rectangle over your header image.
thesacredpath · Member · May 1, 2011 at 8:25 pm
Copy link
And actually, let’s change the second part to be following. I changed the height and added overflow:hidden; to keep the linked transparent image from overlapping the navigation.
```
#text-8 {
    height: 270px;
    left: 50%;
    margin-left: -500px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 1000px;
}
```
bakingsociety · Member · May 1, 2011 at 9:38 pm
Copy link
i’m testing in safari and firefox on mac, and firefox works great, but in safari the header image doesn’t show up now. is that a layer issue possibly?

if you are using IE, could you let me know what you see there?

thanks again!
bakingsociety · Member · May 1, 2011 at 9:39 pm
Copy link
weird, it loads up in safari on my wife’s computer, but not mine. may be a cache issue? going to restart and try again. but please do let me know if you can test in IE. thanks!
thesacredpath · Member · May 1, 2011 at 10:01 pm
Copy link
I don’t have IE, and see what I said in the other thread on the disappearing header issue.

https://en.forums.wordpress.com/topic/header-not-showing-up-4?replies=2
thesacredpath · Member · May 1, 2011 at 10:04 pm
Copy link
I’m not sure what was up with the header image, but after clearing the FF and Safari browser caches, I can now see your header image just fine so yes, I think it is a caching issue.

And in both, the transparent PNG overlay works just fine.
bakingsociety · Member · May 2, 2011 at 4:23 pm
Copy link
thanks for your help!
thesacredpath · Member · May 2, 2011 at 5:27 pm
Copy link
You are welcome.

No items found.