Question:
Hello, does anyone know how to put a gradient background with an image (in png) in css? Searching on the internet I hide this code:
background: red url(./../images/fondo-patron.png) no-repeat bottom center;
It works but with a solid image (for example red, etc)
But when I apply it to my design with the gradient it doesn't work:
.fondo-header {
height: auto;
background: linear-gradient(90deg, rgba(190,55,52,1) 0%, rgba(0,49,96,1) 35%, rgba(0,49,98,1) 100%) url(./../images/fondo-patron.png) no-repeat bottom center;
}
And I don't want to use z-index because it messes up the initial layout for me.
THANK YOU
Answer:
It doesn't work for you because the CSS gradient considers it as an image, therefore you have two images defined in the CSS ( linear-gradient and url ).
Something that could help you would be to use a pseudo element like before :
.fondo-header {
height: 400px;
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6a8ec569-2136-4725-bf5d-0b1fcb468b8d/d9b3r9l-f9e7a2ef-41e2-4a49-a61a-b35d5a89b994.png/v1/fill/w_1192,h_670,strp/cat_render_by_yiffycupcake_d9b3r9l-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzZhOGVjNTY5LTIxMzYtNDcyNS1iZjVkLTBiMWZjYjQ2OGI4ZFwvZDliM3I5bC1mOWU3YTJlZi00MWUyLTRhNDktYTYxYS1iMzVkNWE4OWI5OTQucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.dHHpljpXTz8DCyzSEw7tJBJp5zsuWklf0W-u7iR0Uyk);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
position: relative;
}
.fondo-header:before {
content: "";
right: 0;
left: 0;
bottom: 0;
top: 0;
position: absolute;
z-index: -1;
background-image: linear-gradient(90deg, rgba(190, 55, 52, 1) 0%, rgba(0, 49, 96, 1) 35%, rgba(0, 49, 98, 1) 100%);
}<div class="fondo-header"></div>