double headed trouble
November 27, 2010 3:02 PM   Subscribe

Having skipped pre-school HTML and CSS, I have no idea how to put two images in my wordpress header.

I want one image to be a picture and the other image to be some text (blog title). As I am using dynamic headers, I want the picture images to change but not the text image. I don't want to make the title in CSS because of IE display problems.

Can someone kind and talented please detail the code and changes I need to make to have two images in my wordpress header (using 2010 Weaver theme). Blessings and many thanks will be provided.
posted by doost to Computers & Internet (7 answers total) 1 user marked this as a favorite
 
Best answer: I may not be imagining correctly what it is you're going for here, but why don't you just superimpose the blog title image over each of the 'background' images you want to use in some image editing software? Mucking about with code to do this sounds needlessly complicated. Make Blog Title Image the same dimensions as each of the backgrounds, give it a gloriously transparent Alpha background, and plop it into a new layer on top of each of the bg images you want to use. Keep the BTI around for any additional images you'd like to use for your dynamic headers. Then you just have to worry about positioning *one* randomly-selected (or wevs) image.

This assumes that the text you're displaying is in some designer font, and wouldn't be served well by a simple, universal sans-serif. I mean, if it's just some text (not a trademark or anything) then you could also just insert it into the header as text and call random background images for the header div.
posted by carsonb at 3:25 PM on November 27, 2010


The above being what I would do with my pre-school HTML & CSS, natch.
posted by carsonb at 3:26 PM on November 27, 2010


Response by poster: Many thanks carsonb. Yep, I can do either of those things - layer the text over each of the images, or insert it into the header text, but I don't want to do either for various reasons (some of which may be pouty 'I waaaant' reasons). I want to be able to call up two images for my header, one over the other. Any ideas?
posted by doost at 3:42 PM on November 27, 2010


When you say you are using "dynamic headers", do you mean the Dynamic Headers plugin?
posted by eleyna at 4:00 PM on November 27, 2010


Best answer: It's hard to picture what you're trying to do exactly, but it sounds like you want your title image to overlay the header image, and the header image will be dynamic, so because of whatever you're doing with it, you can't just make your header image a background image with text on top. If that's the case, you'll need to do absolute positioning on the title image. So, your html would look something like:

[img src="whereveryourbackgroundimageis.jpgorwhatever" alt="alttagbecauseitsgoodtohavealttags"]
[img src="yourtitleimage.giforsomething" class="yourclassnamehere" alt="tagname" /]

(replace the square brackets with the correct HTML brackets, natch)

And then your CSS would be:

.yourclassnamehere{
position:absolute;
}

And then you'd have to futz with the margins until your title was where you wanted it. I don't know what your images will look like, but you may also have to make your title graphic a transparent gif. Older versions of IE don't care for transparent PNGs so much, though there are ways to get around that with some javascript, but I'm guessing you're not ready to go there just yet.

It would help us if you could maybe draw a picture of what you're trying to do or link to an example or something. I don't know what your dynamic headers are doing or if you're using a specific plugin or why you need your title to be an image and not text or what.
posted by katillathehun at 4:03 PM on November 27, 2010


Response by poster: eleyna: "When you say you are using "dynamic headers", do you mean the Dynamic Headers plugin"

Yes.

katillathehun, you've sussed it right. I want the title image to overlay the header image. Thanks for the info on older IE and png transparency troubles. You've helped me move along the track but I still need hints, links, info on actual placement of the html clauses (in the header.php? if so, where exactly?). Also, to achieve one above the other, do I need to specify a Z number? (in my searching for info I've come across threads mentioning the Z).
posted by doost at 4:15 PM on November 27, 2010


Best answer: Yes, this would go in your theme's header.php file. You probably don't need to worry about z-index. Z-index is stacking order. If you set it to, say, "1" in your CSS for your title graphic, your title graphic would be on top of everything. But I wouldn't trouble yourself with that unless your title graphic is *not* showing up on top already when you add your absolute positioning.

The Wordpress codex has all kinds of helpful info as to placement of things specific to WP. You may have to adjust accordingly for the Weaver theme - I don't use it, so I can't help you there.
posted by katillathehun at 4:25 PM on November 27, 2010


« Older Best 802.11n/g setup with oldish Apple networking...   |   Help me not be such a jerk when I travel Newer »
This thread is closed to new comments.