CODEWITHSUNDEEP
cssbackgroundbackground-image
Abhay Desai
Abhay Desai

Reputation: 125

Multiple background with css, repeat only one background

Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.

enter image description here

Current Code:

HTML:

<div class="wrapper">
    <div class="container"></div>
</div>

CSS:

.container{
    min-height: 10000px;
    background-image: url(background1.png), url(background2.png);
    background-repeat: no-repeat, repeat-y;
    background-position: center top, center 1000px;
}

The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.

NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.

Upvotes: 1

Views: 1215

Answers (1)

vals
vals

Reputation: 64164

If you set a background to repeat, it can not be limited (AFAIK)

the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)

.test {
    width: 300px;
    height: 600px;
    border: solid black 1px;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 200px;
    background-image: url(http://placekitten.com/g/600/400);
    background-repeat-y: repeat;
}
<div class="test"></div>

Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension

Upvotes: 1

Related Questions