Repeat-y from the middle

HTML & CSS
1

Hi:

I have an image which looks like following:

===============
=
=
=
=
=
=
===============

What I want to do is, take the top portion for header, which is working.

Now I can’t figure out how to take “some” part of the middle and use repeat-y for the content. Is it possible?

and then I want to use the last part as footer. I can slice the image but I saw some site doing it (which I forgot and can’t find anymore) and thought maybe its good idea.

If I can use some part of an image then maybe using same image all through is a good idea. Again, not sure if its possible.

thanks

2

Hi,
From what I am understanding your image includes the header and footer portion. That would cause problems when it repeats as the BG image for the content div.

Yes you could position it to the left or right with background-position. The thing about repeat-y is that it actually tiles the image vertically in both directions from the starting point.

#content {background: #FFF url(image.jpg) repeat-y 0 100px;

For example, using the code above. If you set an image to start it’s position at 100px down from the top, it will actually turn around and fill in that 100px space also.

You will probably be better off just slicing out the section that you need to repeat-y.

3

Thanks. So, as I understand it, it will start from that but it will then repeat when length of page is longer than the end of the image?

So there is no way to repeat only, say, 20px area? Like starting from 100px to 120px and only repeat that 20px?

4

it will start from that but it will then repeat when length of page is longer than the end of the image?

Yes, and not only that it will turn around and repeat back up to the top also.

So there is no way to repeat only, say, 20px area? Like starting from 100px to 120px and only repeat that 20px?

No, not with repeat-y.

You can Test it Here, set the BG position to start down from the top and you will see it turn around and tile in both directions.

If you change the no- repeat to repeat-y you will see it turn around and fill the top 100px also.


/* here's background-position in action */

[B]#example[/B]
{
 [COLOR=Blue] background-position:50px 100px;[/COLOR]
}


/* this is to make the demo look pretty */

[B]#example[/B]
{
  background-image:url(leaves.jpg);
  [COLOR=Blue]background-repeat:repeat-y;[/COLOR] [COLOR=Red]/*no-repeat;*/[/COLOR]
  padding:10px;
  border:2px solid #090;
  color:#030;
  background-color:#fcc;
}
5

thanks. I was hoping its possible but I guess I will have to crop those and use one image.

A little different question. If I have image like

–===========++

My page is fixed length and centered. I want to be able to repeat “–” on left side and “++” on right side.

I am guessing the answer is no. But, if lets say I do have 2 images, is it possible then?

problem is, I don’t want to make rest of the page appear white. but half of the page is in different color than other half so I can’t repeat one image.

Thanks

6

My page is fixed length and centered. I want to be able to repeat “–” on left side and “++” on right side.

If it is a fixed width page then just incorporate the left and right portiions into one BG image and repeat-y it.

We really need to see what you are trying to do in order to give you a sound approach to positioning the images.

Please post a link if you have one, if not then upload your files to a server if you can.

7

Hi:

Here is the link. Right now its just barebones and I just started on it. As you can see, it sort of looks ugly. Not sure how I can make those colors “bleed” to each side. Green with green and red with red. The issue is those while lines. I think I will remove that white line above footer.

http://www.rattanpal.com/_my/vitos/flier

Thanks