CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
Paul Ledger
Paul Ledger

Reputation: 1135

CSS with multiple backgrounds with different repeats

I have done a bit of googling and can't way a way to stop my background images overlapping. What I'm trying to do is have a div with a faded background. But when the fade reachs full opacity I want to apply a different background image that can repeat so the div looks flawless no matter how long the div is.

I have thought about just applying full length images for each web page but I would rather have this working so I don't need to worry about how much content I can apply to each page.

#content_holder{
width:800px;
height:1000px;
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png);
background-position:0 0,0 240px;
background-repeat:no-repeat,repeat-y;
}

Added note: the height says 1000px, this is purely for testing purposes as the div is empty at the moment.

The second image does repeat but starts form the top of the div overlapping the other image.

these are the images:

content-top.png show once Content Top content-bottom.png repeat after content-top Content Bottom

Whats happening: enter image description here

Upvotes: 1

Views: 3269

Answers (3)

Kevin Struillou
Kevin Struillou

Reputation: 914

A radical but effective way to deal with this if you have a known max height and you are already in a ":before":

&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}

Upvotes: 0

Paul Ledger
Paul Ledger

Reputation: 1135

    #content_holder{
    width:800px;
    height:1000px;
   background-color:rgba(0,0,0,.65);
    position: relative;
    z-index: 2;
    background: url(https://i.sstatic.net/j3THB.png) top left no-repeat, url(https://i.sstatic.net/35j7u.png)  bottom left no-repeat;
}
#content_holder:before{
     content: '';
    position: absolute;
    z-index: -1;
    top: 240px;
    right: 0;
    bottom: 0px;
    left: 0;
     background: url(https://i.sstatic.net/35j7u.png) top left repeat-y;

}

Solved it not entirely sure on a full explanation but it works find this post, it was quite similar to mine.

JSFIDDLE

Upvotes: 2

nkmol
nkmol

Reputation: 8091

What about just removing background-position and adjust the background-repeat:

background-repeat: repeat-x, repeat;

jsFiddle

edit
Hmm, multiple background just works like this. It's overlaying because the border underneath it is has the full height(it's repeating). A background doesn't see a other background as a boundry. You can do two things:

  1. Make the boundry with a seperate element, so one element for the top background and one for the bottom background.
  2. You can edit the image to make the transition more smooth, thus you can't really see the border does overlap(a semi-transparent image makes a smooth transition easy)

Upvotes: 2

Related Questions