Logo image overly header image
-
In my current header, you will see my logo tucked behind the header image. My goal is to make my logo part of the header to seamlessly appear as a banner.
I’ve tried z-index to no avail. I also tried using CDS in #header-image and I now am trying the menu layer. I’m out of ideas!
The blog I need help with is: (visible only to logged in users)
-
-
Ugh, sorry folks…typed this on my phone. The title should read “overlay” header image. I’m trying to bring an image to the foreground in the header, while using the random built-in WordPress header system…
-
Ok, I’ve obviously spammed my own post so feel free to delete this thread, admins…unless you think it will be useful.
This is what I ended up putting into my custom CSS:
#header {
background-image:url('http://noarizona.files.wordpress.com/2012/02/logo_small.jpg');
background-repeat:no-repeat;
background-size:80px 80px;
margin: 20px
height: 100px
position:absolute;
z-index:90000;}
Now I’ve got my logo floating over the built-in header system WordPress uses. I like having a random image, and this is just what I needed.
I knew if I kept plugging away, I’d get it! ugh!
-
Glad to see you figured this out!
I noticed the image at the bottom of your sidebar is too big for the space, if you adjust the size to something closer to 222px in the image widget settings on your Appearance → Widgets page, I think it will look better.
I also noticed there’s some extra html in the code you posted and I’m trying to figure out how that’s happening. Is there any chance you could let me know how you copy and pasted that (was it from the CSS editor in your blog dashboard)? And also what browser and browser version you were using when you posted that code?
-
Thanks for pointing out the image! I went ahead and just removed it since I didn’t really need it.
Not sure where the extra HTML is coming from. Where are you finding it? I did my modifications through the CSS panel using the latest version of Chrome. I suppose I should check all the major browsers to make sure it’s displaying properly.
Any other feedback would be greatly appreciated!
-
Sorry I wasn’t more clear. I meant there is extra HTML in your code example that was pasted in the forums. It’s making this odd little display thing happen sometimes, and it looks like this: http://cl.ly/EF31 I’m trying to figure out how to reproduce that. If you have any ideas, lemme know. If not, no worries.
- The topic ‘Logo image overly header image’ is closed to new replies.