CODEWITHSUNDEEP
htmlbackground-imagerepeat
Null Head
Null Head

Reputation: 2941

CSS: How to overlap HTML background repeat tiles?

I am creating a skin to my website that has metal brush look.
I want the metal look to seamlessly extend horizontally. If a small portion of it is made to repeat, the page looks patchy as there is visible difference between left and right edges of the background image. So instead I thought making the left and right edges a bit transparent and make the repeating tiles overlap so that it can create a illusion of seamless metal background. But how do I get the tiles to overlap?

Tiles (with transparent edges) are repeated on x

Upvotes: 1

Views: 3448

Answers (1)

DA.
DA.

Reputation: 40671

An element can now have multiple background images in CSS3:

http://www.css3.info/preview/multiple-backgrounds/

That won't work on all browsers, but most new ones.

That said, the solution is really to create a properly tiling background image. The method I use is to open in your image editing software, and duplicate it so it's now a wider image side-by-side:

    +----------------------++---------------------+
    |                      ||                     |
    |                      ||                     |
    +----------------------++---------------------+

Using your tool of choice (clone tool, smudge tool, paintbrush, etc.) blend the the two ends that meet in the middle together so there is a smooth transition. When finished, copy the left half of the right image...

                            +----------+
                            |Copy this |
    +----------------------+|----------|----------+
    |                      ||          |          |
    |                      ||          |          |
    +----------------------+|----------|----------+
                            |          |
                            +----------+

And move it back to the left side of the first image:

    +-----------+
    |paste here |
    |-----------|----------++---------------------+
    |           |          ||                     |
    |           |          ||                     |
    |-----------|----------++---------------------+
    |           |
    +-----------+

Then delete the right half that you duplicated and you'll now be left with a proper horizontally tiling background image.

Upvotes: 2

Related Questions