Diagonal background

Asked

Viewed 2,091 times

1

Css :

.bio {
    width: 100%;
    min-width: auto;
    height: auto;
    min-height: 600px;
    background-color: #fff;
    background-image: -webkit-linear-gradient(30deg, #fff 50%, #004E95 50%);
}

That generates :

Background

But I’d like to trade #004E95 for an image, someone knows what changes I must make to make this possible ?

css css3

1 answer

0


First to have the image you have to make the image, be it in Photoshop, Corel and qq other software. Or you make a SVG that is like a vector image that is interpreted by the Browser, then you put the color you want.

To apply in HTML I will give you two options. One with Background-image as in your model. And another with ::after.

Model with background-image

body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.bg {
    width: 100%;
    height: 300px;
    background-image: url(http://engiobra.com/wp-content/uploads/2014/06/trapezio.png);
    background-position: center left 350px;
    background-repeat: no-repeat;
    background-size: 100% 350px;
}
<div class="bg"></div>

Model with ::after

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.bg {
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.bg::after {
    content: url(http://saogeraldo.com/wp-content/uploads/2016/09/Produto-saogeraldo-trapezio-black-decortiles.jpg);
    position: absolute;
    width: 100%;
    transform: translate(60%, -27%);
    overflow: hidden;
}
<div class="bg"></div>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.