CODEWITHSUNDEEP
htmlcssbackground-image
user3601422
user3601422

Reputation: 5

Background image repeat from center to right

I am looking for a way to horizontally repeat simple color background stripe, but only from the center of the page to the right. I am not sure how to do this.

Upvotes: 0

Views: 110

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

There is no easy way to achieve this but not impossible, you can use CSS :after pseudo to do so.

Here, I am using :after pseudo element, and than we are using CSS Positioning technique to position the element 50% from the left and than with the negative z-index we push that to the back.

Demo

div {
    height: 100px;
    position: relative;
    overflow: hidden;
}

div:after {
    content: "";
    left: 50%;
    width: 50%;
    background-image: url(http://virgo.unive.it/itadict/search/images/bullet.png);
    position: absolute;
    min-height: 16px;
    z-index: -1;
    top: 0;
}

Upvotes: 1

Related Questions