CODEWITHSUNDEEP
htmlcss
Zoe Epix
Zoe Epix

Reputation: 63

CSS :after tag with background image and %

So I have the following code, it puts a slanted white border at the top of the div (I have an after tag popping another one at the bottom) - my problem is making this responsive - when I shrink my window down the images don't seem to stay top left and bottom left, they move downwards and upwards releaving a chunk of coloured block top and bottom which I am trying to hide and make look skewed in the process...

.fixed-width-container {
    width:60%;
    margin:0px auto;
    float:left;
    .slant {

    position: relative;
        &:before {
            content:"";
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:94px;
            background-image: url('images/angle.png');
            background-repeat: no-repeat;
            background-position: top left;
            background-size:100%;
            z-index: 0;
            display: block;
            -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);              
        }               
    }
}

any ideas how to get them to stay put? % height doesn't do the job either...

Cheers :)

Upvotes: 1

Views: 54

Answers (1)

Zoe Epix
Zoe Epix

Reputation: 63

Changed my code in the end! Instead of using an image I used a white block and rotated it:

.slant {
position: relative;
&:after {
    display: block;
    content: "";
    color: transparent;
    width: 100%;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: -10px;
    bottom: -50px;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}
&:before {
    display: block;
    content: "";
    color: transparent;
    width: 100%;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: -10px;
    top: -50px;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}
}

Upvotes: 1

Related Questions