Is this gradient design the entire background image or a separate image in CSS?

Question

I'm trying to recreate a website with these type of designs, but I can't figure out if this is a fixed background image and they just positioned the logos inside of it, or is this a separate image that they downloaded and positioned it on the site?

I tried to inspect it, but it doesn't show up in the html and only the logos inside the gradient image show in the html

simmer · Answer

Great question! You just need to explore around a bit more using your web inspector :)
The answer is that it's:

an SVG image
that is set as the background image in a :before pseudoelement
which is absolutely positioned behind those logos

This is a really handy technique for cases where simply setting a background-image on the parent element doesn't provide precise-enough positioning control.

Is this gradient design the entire background image or a separate image in CSS?

One Answer

Add your own answers!

Ask a Question