CODEWITHSUNDEEP
cssbackground-imagepseudo-element
user5269943
user5269943

Reputation:

Background image with :before and :after

I have a row on responsive website that I would like to have the attached image as a background image on top and below. I know this can be achieved with the pseudo elements :before and :after, but I am not sure how to do this.
I have the row:

.row {
    background: #444444;
}

so how could I apply the image before and after? https://www.dropbox.com/s/e9h3w2qqvxqntps/background.svg?dl=0

Upvotes: 0

Views: 8341

Answers (1)

Rohit Kumar
Rohit Kumar

Reputation: 2031

use :before and :after for background-image in this way -

.row:before {
content: url('imageURL');
}
.row:after {
content: url('imageURL');
}

now you can position each :before and :after with position: absolute and then adjust top and bottom properties.

Upvotes: 3

Related Questions