SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Additional html element needed for second background image

    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.

    Code:
      <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.

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by vinpkl; Nov 26, 2009 at 06:26. Reason: bg

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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".

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by gwh View Post
    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.)

  9. #9
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by gwh View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •