Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Location
    England
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables/Background images

    I'm having troubles in producing the effect that I want. On my website, I have a table containing a background image (http://www.btccaction.co.uk/index_news_cell_2.gif) which houses the latest 10 news articles.

    If one of those news headlines spans two lines, the table stretches and the table background image repeats.

    Can anyone please explain to me how I might create an effect that 'stretches' the background image?

    (You can see the wrong and current presentation here - www.btccaction.co.uk/testindex.php)

    Thanks very much

    ANDY

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Salem, Oregon
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As best I know, there's no way to actually stretch a true background image. Besides, if you stretched the image vertically, it would look distorted and not nearly as pretty. However, you are not without options.

    My advice would be to take the border image and break it into two pieces . . . a top and a bottom. Give the bottom piece extra-tall left and right sides. Then use CSS to attach the background image to the bottom of the bottom section, and the top of the top section. Your code might look something like this:

    In <head>:
    Code:
    <style>
      .newsbox {
        width: 231px;
      }
    
      .news-head {
        background-image: url(index_news_cell_2_top.gif);
        background-position-y: top;
        background-repeat: no-repeat;
      }
    
      .news-body {
        background-image: url(index_news_cell_2_bottom.gif);
        background-position-y: bottom;
        background-repeat: no-repeat;
      }
    </style>
    In <body>:
    Code:
    <div class="newsbox">
      <div class="news-head">
         ... (your headline image/text would go here)
      </div>
      <div class="news-body">
         ... (all your news links would go here)
      </div>
    </div>
    The "background-position-y" attribute sticks the background image to the top or bottom of whatever item has the background image.

    I hope this is helpful!

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Background stretching via CSS won’t be available until the CSS3 Borders and Backgrounds Module (working draft) starts being implemented. You can create a fake stretched background using the image element, absolute positioning, and z-indexing, but that probably won’t work for your situation.

    You can get the effect you want though by slicing the background into three images: top, middle, and bottom. You would apply those backgrounds to three nested elements with the content being in the innermost element. The top background would not repeat and would be on the middle element. The middle background would repeat vertically and be on the outermost element. The bottom background would not repeat and would be positioned at the bottom of the inner element. Note that this means that your background images will (A) have to be revised every time the width of the box changes and (B) will also have to be revised every time the page’s background color changes. (B) can be fixed by stacking the elements instead of nesting them, however.

    If you don’t care about Internet Explorer visuals, you can also use proprietary, experimental properties based on CSS3, like Mozilla’s -moz-border-radius property, to get the rounded corner effect without any use of images. Other browsers will simply see square corners.

    Edit: Was busy doing something else and didn’t hit post so someone beat me.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by djublonskopf View Post
    The "background-position-y" attribute sticks the background image to the top or bottom of whatever item has the background image.
    I think it should be noted that this property is proprietary to Microsoft and probably won’t work in other browsers. It’s actually redundant since the CSS2.1 background-position property does exactly the same thing.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Salem, Oregon
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, thank you for letting me know (and for letting the original poster, as well). I'll keep that in mind for the future.


  •  

    Posting Permissions

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