SASS mixin for ::before/::after background images
Repost of my gist here: https://gist.github.com/2522835
Note that it'll only work on elements that can contain other elements; for instance you'll need to wrap input tags in span tags and apply the mixin to these.
@mixin before-after-background($height, $side-width, $before, $after) {
height: $height;
position: relative;
z-index: 1;
&:before, &:after {
content: '';
display: block;
height: $height;
position: absolute;
top: 0px;
width: $side-width;
z-index: -1;
}
&:before {
background-image: $before;
left: -$side-width;
}
&:after {
background-image: $after;
right: -$side-width;
}
}
Written by Luke Carrier
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#