Posted by beckyjohnson on April 24, 2013 at 7:46pm
I have this page: http://verilan.right-brain.net/contact#
I want to add an image to the second header but I don't want to use a background image, because background size isn't ie 8 or 7 proof. So I wondered if I could just make a template for region header second, detect if it's on the contact page and then have an inline image tag show up with my image. I just didn't want to add yet another block that only holds one image to my theme and make it show up on the contact page. I already had to add a bunch of blocks to my theme already for graphics and stuff and I just didn't want to keep cluttering it up.
Thoughts?
Rebecca
Comments
Sounds like an interesting
Sounds like an interesting problem. So you're wanting to have responsive images, but because of the IE7/8 issue with CSS3 background-size property you're looking for an alternative option. It looks like there's some JS work arounds to get it working for IE7/8.
A good round up of the options here - http://css-tricks.com/perfect-full-page-background-image/
And by adding the image using a template would you use,
width: 100%
height: auto
to make the images responsive?
You could use JS to load
You could use JS to load based on the body.node-id number class. But this does sound like it would be easier to just make the image as a block and then call it in using context.