Jump to content
xisto Community
Sign in to follow this  
gaea

Way For A Css 'background-repeat' To End In A Completed Image?

Recommended Posts

Does anyone know of a way to ensure that a css 'background-repeat' will end in a completed image? I'm using a fluid layout envolving curved paper. The paper is a background image repeated down the y axsis. I need it to end up in a full image at the bottom, in order to put an end image.

 

I'm not sure if this is possible. I searched for it abit on google, but didn't find much.

 

Thanks for your time.

Share this post


Link to post
Share on other sites

Not that I am aware of, in order for a image to repeat you need a new line of text to pull it off. so you best option would be to create a footer image that as an end image to it and then set it up as a div.

Here would be a loose example

<Div>Top</div><div>repeat</div><div>Footer End image</div>

Now to have your footer look correctly if you look at the bottom of your new site, copy at 1050x50 section of that bottom the flip it so both bottoms connect to each other. So they will look the same.

Hopefully I explain that good enough for you get were I am going with this, if not, pm the background image and I make the cut and then set it up for you.

Share this post


Link to post
Share on other sites

Just a top of my head, would this work?

Let the bodybackground to repeat-y. As you come to the end, you can make the last DIV to appear (usually a footnote or a copyright statement) and let this DIV background to be the end picture. And depending on how you have your last end picture, it will cover-over the existing background.

This will be fluid or flexible according to the client side's browser height.

EDIT: :P Saint_Michael beat me to the post

EDIT: :P got to be faster then that buff

Share this post


Link to post
Share on other sites

Michael: I'm not 100% clear on what you're suggesting. The problem is that the part at the "bottom" of the <div>repeat</div> changes, depending on what text size people use. Sorry if I wasn't clear enough in my description. Check out http://imptestrm.com/rg-erdr.php?_dnm=www.facesofwar.org&_cfrg=1&_drid=as-drid-2300300503455222 to see the site I'm talking about. I'd like to replace that bottom copyright banner with an "end piece" (some of the graphics are going to be redone, but you get the point).

 

BuffaloHELP: Intriguing idea, I'll try it when I have a free moment. It seems like we'd wind up with the same problem though...making sure the top of the image lined up correctly with wherever it was inserted.

Edited by gaea (see edit history)

Share this post


Link to post
Share on other sites

Ok this is what we are referring to.

 

Here is your background

 

Posted Image

 

Heres your footer

 

Posted Image

 

Now in order to for this to work properly I had to flip the background over so the footer and the content back ground match like so:

 

Posted Image

 

and there you go your brand footer. It might not be perfect since their is no closing but you could do something like your header and fade it out.

Share this post


Link to post
Share on other sites

Ah, i see what you mean Michael. Unfortunately that still doesn't get around the problem of the fluid layout.
Go to the test site (http://imptestrm.com/rg-erdr.php?_dnm=www.facesofwar.org&_cfrg=1&_drid=as-drid-2300300503455222) and change your font size (on a PC just hold down control and move the mouse wheel...don't know about mac). See how the bottom of the image, the point where the footer needs to meet up with, changes depending on what text size you're at?

Edited by gaea (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.