How to remove background color from image & set webpage background using CSS trick only.

harshal255

Harshal Kahar

Posted on January 9, 2024

How to remove background color from image & set webpage background using CSS trick only.

Image description

Working on my project and stumbled upon a cool ๐˜๐—ฟ๐—ถ๐—ฐ๐—ธ in ๐—ง๐—ฎ๐—ถ๐—น๐˜„๐—ถ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ & ๐—–๐—ฆ๐—ฆ the ๐—บ๐—ถ๐˜…-๐—ฏ๐—น๐—ฒ๐—ป๐—ฑ-๐—บ๐˜‚๐—น๐˜๐—ถ๐—ฝ๐—น๐˜† class! ๐ŸŽจ

It's a ๐—ด๐—ฎ๐—บ๐—ฒ-๐—ฐ๐—ต๐—ฎ๐—ป๐—ด๐—ฒ๐—ฟ for setting ๐—ถ๐—บ๐—ฎ๐—ด๐—ฒ ๐—ฏ๐—ฎ๐—ฐ๐—ธ๐—ด๐—ฟ๐—ผ๐˜‚๐—ป๐—ฑ๐˜€ ๐—ผ๐—ป ๐˜„๐—ฒ๐—ฏ ๐—ฝ๐—ฎ๐—ด๐—ฒ๐˜€, ๐—ป๐—ผ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐—ณ๐—ผ๐—ฟ ๐—ฏ๐—ฎ๐—ฐ๐—ธ๐—ด๐—ฟ๐—ผ๐˜‚๐—ป๐—ฑ ๐—ฟ๐—ฒ๐—บ๐—ผ๐˜ƒ๐—ฎ๐—น ๐˜๐—ผ๐—ผ๐—น๐˜€! Works like a charm, even if your image has a ๐—ฑ๐—ถ๐—ณ๐—ณ๐—ฒ๐—ฟ๐—ฒ๐—ป๐˜ ๐—ฐ๐—ผ๐—น๐—ผ๐—ฟ ๐—ฏ๐—ฎ๐—ฐ๐—ธ๐—ด๐—ฟ๐—ผ๐˜‚๐—ป๐—ฑ.

๐—ค๐˜‚๐—ถ๐—ฐ๐—ธ ๐——๐—ฒ๐˜๐—ฎ๐—ถ๐—น๐˜€:

โœจ ๐—ง๐—ฎ๐—ถ๐—น๐˜„๐—ถ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ: Simply include ๐—บ๐—ถ๐˜…-๐—ฏ๐—น๐—ฒ๐—ป๐—ฑ-๐—บ๐˜‚๐—น๐˜๐—ถ๐—ฝ๐—น๐˜† in your class list of an image, and there you go! Seamless, stunning web page backgrounds.

โœจ๐—–๐—ฆ๐—ฆ: For the traditionalists, use ๐—บ๐—ถ๐˜…-๐—ฏ๐—น๐—ฒ๐—ป๐—ฑ-๐—บ๐—ผ๐—ฑ๐—ฒ: ๐—บ๐˜‚๐—น๐˜๐—ถ๐—ฝ๐—น๐˜†; same awesome results!

โœจ ๐—ฆ๐—ถ๐—บ๐—ฝ๐—น๐—ฒ, ๐˜€๐˜๐˜†๐—น๐—ถ๐˜€๐—ต, ๐—ฎ๐—ป๐—ฑ ๐—ฎ๐—ฑ๐—ฑ๐˜€ ๐—ฎ ๐˜‚๐—ป๐—ถ๐—พ๐˜‚๐—ฒ ๐˜๐—ผ๐˜‚๐—ฐ๐—ต ๐˜๐—ผ ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ฑ๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐˜€. ๐—ก๐—ผ ๐—บ๐—ผ๐—ฟ๐—ฒ ๐—ต๐—ฎ๐˜€๐˜€๐—น๐—ฒ, ๐—ท๐˜‚๐˜€๐˜ ๐—ฝ๐˜‚๐—ฟ๐—ฒ ๐—ฐ๐—ฟ๐—ฒ๐—ฎ๐˜๐—ถ๐˜ƒ๐—ฒ ๐—ณ๐˜‚๐—ป!

Have you tried this trick? Share your thoughts in the comments! Let's chat and swap design hacks. ๐Ÿš€๐Ÿ’ฌ

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
harshal255
Harshal Kahar

Posted on January 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About