Geek Answers Handbook

Complex CSS background textures

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

The background I'm talking about is the “parchment” where the copy is located. This parchment is not a simple texture that I'm used to dealing with. Normally, I would define the "upper" and "lower" parts, and then repeat the pattern for the middle. This would allow me to create an automatically expanding div depending on the size of the content. This case is not so simple because the top 75% of the pattern is not repeated.

I know that there is a better way to do this, but I rack my brains for many hours and cannot find a suitable solution. Any thoughts?

We recently discussed this with:

#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 problem is that the body-text of the div automatically expands, even though the text has not reached the bottom of the containing div. It would be simple if CSS allowed multiple backgrounds with different z-indexes. #rippingmyhairout

+4
source share
2 answers

Instead of setting the texture as the background of the content, how to set it as the background of the container div and leaving top_scroll.png as part of the text text itself?

those.

 #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 in a 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 # body-text div will hide the top of repeat_scroll.png as part of the container, making it look like top_scroll.png merges seamlessly into repeat_scroll.png.

You can add an extra padding to the top of # body-text to slightly press on the text to give space to the image itself.

+2
source

for your image for the position we make the upper center.

 background-position:top;
Center

not needed because it is automatically centered if the 2nd space is left empty

0
source

More articles:


All Articles