CSS: Using background-position and background-repeat

  • I need to know if there’s a way to use both background-repeat and background-position in CSS on the same element.

    Basically, I have a semi-transparent PNG that has a gradient for the first 300px followed by a flat 1px (height) by 200px (width) PNG (repeated vertically till the end of the element). The element does not have a fixed height (ie it’s fluid).

    The problem I’m facing is getting the 1px PNG to start repeating after 300px, and not before (as background-repeat does it both ways).

    Is there a hack for this?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Well, for one thing, why make it 1px high? That sure will waste a lot of bandwidth on larger pages. The one I just made for a site I’m building is 200px high, so it will only repeat a few times on most pages.

    I’ve basically done what you’re talking about, too. The way I did it is to wrap the element with another div, and set the repeating background to that element. Then, the inner element has the gradient, and since it’s next in line, its background will go on top of the first one. In the end, you’ll have a gradient merging into a solid, repeating colour until the end of the document.

    Thread Starter nixwanning

    (@nixwanning)

    Hi jonlandrum,

    Thanks for replying.

    Having it 1px high decreases the file size and I believe that it’ll require less disk space/bandwidth.

    I understand the method you’ve given, in fact, I tried it out before, but the problem lies with the fact that these are semi-transparent PNGs.

    If you stack 2 semi transparent PNGs on top of each other, then the “gradient” part will be more defined than the rest of the body of the element, and the gap where the gradient ends is very obvious.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS: Using background-position and background-repeat’ is closed to new replies.