SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast arthurakay's Avatar
    Join Date
    Aug 2007
    Location
    Chicago
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS styling for HR

    Is it possible to have more than one background image styled for an HR tag?

    Currently, I have some code written like this (pseudo-code):
    Code:
    <div align="center">
      <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
      <img src="middle.gif" style="vertical-align:middle;" />
      <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
    </div>
    This displays three images pasted next to one another... the middle image is sandwhiched between two horizontal lines (gif images) which extend/contract based on the window size.

    Is it possible to style this to do the same thing using an HR tag? This would be easier than doing an SSI INCLUDE call for this snippet of code.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In css presently you can only have one background image per element (although css3 has proposals for more).

    I wouldn't use an hr anyway because it is one of those elements that can't be styled within any degree of accuracy cross-browser.

    If the image is a simple divider then I would make one long image and then centre in in the bottom of the container.

    Something like this:

    http://www.pmob.co.uk/temp/starrow.htm

    The image is wide enough for all monitors and still only about 2k.


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
  •