Can anyone tell me how can I get this kind of background effect ?
Meetup
Meetup | Find Local Groups, Events, and Activities Near You
Find Meetup events, join groups, or start your own. Make new friends and connect with like-minded people. Meet people near you who share your interests.
14 Replies
are you talking about the background image? https://www.meetup.com/images/background-noise.webp
so its just a dumb image?
ok thanks
a lot of the time fancy stuff is just dumb stuff implemented well
but yeah, it's just an image and that's an entirely fine way to do a background like that
it's only about 30kb and the regular background is close enough you don't super notice the difference between before and after the image loading in
can you tell me how you found it in the dev tool? because i couldn't when i first searched for it
I looked at the body tag, which is the most likely place to put a site-wide background. That had
background-image: var(--background-image); on it, so I filtered the styles to show rules with "background-image" in them on the body tag and it showed this:
you can see there's a variable set on
:root to that URL that you can just click to get to the actual imageah sorry im a css noob so im gonna ask different stupid questions like this one
i wasn't even able to find it in the dev tool
no worries, that's exactly what #help is there for!
thanks for the help
repeating patterns as background is one of the oldest tricks in web design. It allows the image to be relatively small (rectangle) and be repeated on both axes (X, Y), like tiles in a bathroom.
using a big image as wallpaper is wrong?
you want to limit the amount of data you send to the end user, though that kinda sorta depends on the site you're making too
if you're making a necessary site like a public service that's going to be used by people in low-income areas on mobile, you want to be very frugal with the amount of data you send to them
if you're making a site for a startup aimed at tech bros in silicon valley, put a barely compressed video in the background, it's fine
but general rule of thumb is that you should minimize the amount of data sent because it will make your site load faster and feel better to the end user, even if they're on a fast connection
that was especially true back in the day when a chunk of your users might still be on dialup at 56k6 or worse
ok i understood, thanks
Say you had the choice between loading an image that’s 3000x4000 at 800kb that has the square repeated , or loading an svg of a square that’s 2kb then using it on background-image set to repeat.