Additional html element needed for second background image

[gwh]

Hi everyone,

I have the following code and I've used css to insert a background image into the h3 element – basically just an image tile.

  <div id="sidebar">
    <h3>Apparel Categories</h3>
    <ul>
      <li id="ProdOne"><a href="#">Product 1</a></li>
      <li id="ProdTwo"><a href="#">Product 2</a></li>
      <li id="ProdThree"><a href="#">Product 3</a></li>
      <li id="ProdFour"><a href="#">Product 4</a></li>
      </ul>
  </div>

In addition to this tile image I need to insert another image that will represent the contents of the h3, ie. an image that says "Apparel Categories" (I'm using the Phark method to do this). As I need two background images inserted into this element I'm assuming I'll need an extra element wrapped around the h3 to do this. I was thinking about using a div but wondered if there was some other more appropriate element to use instead.

Appreciate any comments or advice.

[vinpkl]

easy method is to mix two images in photoshop acording to requirement and then insert it.

rest without seeing the image its not easy to judge.

vineet

[ralph.m]

Sorry if this is a silly question, but do you really need two images? If so, you probably may as well wrap the header in a div.

There are better methods for image replacement than Phark, I'd argue, such as this: http://www.pmob.co.uk/temp/headerreplacement2.htm. Otherwise, anyone with images off will be "Pharked".

[gwh]

Thanks for the reply,

Your suggestion would probably work in my case since the width of the h3 is relatively small, but I wondered how it would work in other instances when the two images would be needed due to the width of the h3 being fairly wide so a tiled image would be more appropriate as well as a second image on top. In these types of cases, would a div be the best element to use around the h3 or can I nest a div within an h3 or use a span or something?

[ralph.m]

You could certainly use a span, though you'd have to set it to display:block and absolutely position it over the header. (That's what's involved in the example I linked to above.) For what you are aiming to do, with two background images, it sounds easier to wrap the header in a div. I can't vouch for how others would respond, though.

[gwh]

Yeah a div sounds like the best option. Re the alternative to the Phark method you mentioned, I might give this a try. I never really worried about the potential problem of images being turned off as I thought this would rarely occur. I mean who turns images off when they're on the internet. Would be pretty boring.

[gwh]

I also have another question, albeit unrelated so not sure if I should post separately. I just wondered when creating images in Photoshop that will be tiled along the x-axis using css backgrounds, I wondered what is the minimum width you should aim for? I've been creating them at about 10 pixels wide but wasn't sure if this was too narrow as I've read that if the tile is too narrow that it takes up too much computer processing.

[ralph.m]

who turns images off when they're on the internet. Would be pretty boring.

I know some people who do because they save on downloads and have slow connections. Some people also just want information and not all the unnecessary bell and whistles. I sometimes turn of images when I get sick of lots of unnecessary stuff slowing down a page load.

Still, I just like to have a method as robust as possible. The method above covers the most bases of any method--css off, images off... its only major drawback being that you can't use transparent images. (The area of the header has to be fixed too, meaning that if images are off and text is re-sized, some of it may be hidden... probably a rare scenario.)

[gwh]

I think the inability to use transparent images outweighs the advantages as I use these a lot, so I may need to find an alternative. Thanks for your help.

[ralph.m]

I've been creating them at about 10 pixels wide but wasn't sure if this was too narrow as I've read that if the tile is too narrow that it takes up too much computer processing.

Theoretically, they can be 1px wide, but I've read in quite a few places that something around 10px is recommended. Any narrower can have some problems in older IEs, though I've never seen that. 10px is fine.