Question

I have a bit of a complex issue with a CSS background. Check out my attempt here: http://beveragebros.com/bbnew/scroll.html

The background I’m talking about is the “parchment” where the copy is. This parchment is not a simple texture that I’m used to dealing with. Normally, I would identify a “top” and “bottom” portion and then a repeated pattern for the middle. This would allow me to make an auto-expanding div depending on the size of the contents. This case isn’t so simple because the top 75% of the pattern does not repeat.

I know there’s a better way to do this but I’ve been racking my brain for hours and can’t seem to arrive at a good solution. Any thoughts?

Recently was toying around with this:

#body-text {
  background-image:url(images/repeat_scroll.png);
  background-repeat:repeat-y;
  width:730px;
}

#copy {
  position:relative;
  top:-200px;
}

Markup:

<div id="body-text">
<img src="images/top_scroll.png" alt="Top" />
<div id="copy">
   Testing Testing Testing Testing Testing
</div></div>

However, the issue is that the div body-text auto-expands despite the fact that the text has not reached the bottom of the containing div. This would be SO simple if CSS allowed for multiple backgrounds with various z-indices. #rippingmyhairout

Answer 1

Instead of setting the texture as the background of the content, how about setting it as the background of a container div and leave the top_scroll.png as part of the body text itself?

I.E.

#container {
     background:url(images/repeat_scroll.png) center top repeat-y;
}
#body-text {
    background:url(images/images/top_scroll.png) center top no-repeat;
}

And then put everything inside the container…

<div id="container">
    <div id="body-text">
        Testing Testing Testing Testing Testing
    </div>
    <div id="bottom-scroll">
        <img id="margarita" src="images/margarita.png" alt="Margarita" />
        <img id="fruit" src="images/fruit.png" alt="Fruit" />
    </div>
</div>

Now the background image of the #body-text div will hide the top of the repeat_scroll.png as part of the container making it look like top_scroll.png seamlessly merges into repeat_scroll.png.

You can add some extra padding inside the top of #body-text to push down the text a bit so as to give room to the image itself.