CSS gradient with image

Question

CSS gradient with image

Navigation

#1 by (2 votes)

2

I need to develop a responsive web page, I will put a background image as "texture", but they can not occupy the entire screen, only halfway, giving a fade transition between the image and the white part on top .

I tried to use linear gradient, but it does not accept image. I searched for stories and no one mentions the subject. Any help will be welcome.

<divclass="page-content imagem-fundo">
                    <div class="row container cabecalho-home">...</div>
</div>

.imagem-fundo { background-image: url('../img/poly.png');}

html css

asked by anonymous 27.06.2018 / 17:01

1 answer

How do you model a role in object orientation? Escape HTML inside element code - No jQuery

score 2 · Accepted Answer

It works yes see the example, notice that in background-image I used a linear-gradiente and an image with pattern

html, body {
    height: 100%;
    width: 100px;
    margin: 0;
    padding: 0;
}
body {
    background-image: linear-gradient(to bottom, transparent 0%, #fff 50%), url(https://static.vecteezy.com/system/resources/thumbnails/000/103/376/small/crosshatch-style-background-pattern.jpg);
}