blend problem
is there a way to blend this background image with some kind of image so it covers the below section does not look like its a different section i mean can the land part of image extend some how background repeat or smth?
11 Replies
You could put an element over the image and below the text with a gradient from
transparent to the color of the next sections background-color.
If you want the image to expand you could put your first two sections in a container and put the background-image on that. (and maybe add the gradient to the second section)smth like this
i dint get what ur trying to say
This is the most practical solution. If you repeat the background, that only looks good for textures. Your image is not a texture and repeating it won't look good. It is also possible to stretch a background, but that has limitations. Either parts of the image will go outside the viewport or the proportions will be distorted. The image may also become grainy if the resolution isn't high enough.
i dint get what ur saying can you show me some examples like this i cant find any
What do you mean? You already showed the example.
this image is already fading into black i wana see if its possible to do the same with the type of image i have
Add a gradient on a layer above it.
You can also use a gradient as an image mask.
Another option is to add the gradient behind and use mix-blend-mode.
There is also the option of using two backgrounds with background-blend-mode. The second background would be the gradient.
gradient how m i gona use gradient on this i dont think it will work
this one i dont know about
does kevin have any videos about this?
Here is proof that it works: https://codepen.io/chooking/pen/ZEVKWGr
this is smth new