By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 985 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

continuing background

P: n/a
Hello,

I have a background image that needs to continue to infinity.
Currently, I have a band-aid solution where I've made my background
image 3000px and kept it pretty small in file size with the height set
to 'auto'. However, I've always wanted to do this the right way and was
hoping someone could help me and/or point me to a good tutuorial
creating infinity backgrounds with nested <div>'s.

The page I'm working on can be found at
http://www.smartwebdevelopment.com/css/cities.html

Thanks in advance for any suggestions.

Aaron

Oct 12 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2006-10-12, acorn71 <ac*****@gmail.comwrote:
Hello,

I have a background image that needs to continue to infinity.
Currently, I have a band-aid solution where I've made my background
image 3000px and kept it pretty small in file size with the height set
to 'auto'. However, I've always wanted to do this the right way and was
hoping someone could help me and/or point me to a good tutuorial
creating infinity backgrounds with nested <div>'s.

The page I'm working on can be found at
http://www.smartwebdevelopment.com/css/cities.html
You could divide your image into two images, the top bit, and the bit
below that that goes on forever.

Then put another div outside .pageBlockTop with the repeating bit as a
repeating background image:

<div style="background-image: url("stripe.jpg");
background-repeat: repeat-y">
<div class="pageBlockTop">
</div>
</div>

Then you can edit your 3000px image to be just long enough to get as far
as the repeating stripe at the bottom.

Also set background-color: transparent on pageBlockTop (although it's
usually the default anyway).
Oct 12 '06 #2

P: n/a
On 2006-10-12, acorn71 wrote:
Hello,

I have a background image that needs to continue to infinity.
Currently, I have a band-aid solution where I've made my background
image 3000px and kept it pretty small in file size with the height set
to 'auto'. However, I've always wanted to do this the right way and was
hoping someone could help me and/or point me to a good tutuorial
creating infinity backgrounds with nested <div>'s.

The page I'm working on can be found at
http://www.smartwebdevelopment.com/css/cities.html
Since you want solid colours, use background colours.

(And while you are at it, get rid of the fixed px-sized widths.
See how it looks in my browser at
<http://cfaj.freeshell.org/testing/roomers.jpg>.)

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Oct 14 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.