NOCODE HAVEN
navigation

Style your background image

notion image
So with one of the recent features from Popsy it’s possible to have a background image for your website. Even though this is a great feature sometimes you want some granular controls for example changing the brightness of certain elements and classes to make them stand out. Well here it is!
 

WHY USE THIS?

You can effectively have an image and make it darker in order for the text to pop. Like in the example picture above (not the actual site I used this on) the white text would not be readable if the background image was in it’s original state. But with code you can effectively make it darker and also make the white text even brighter. Just goes to show you again that when you inspect the right elements and classes and target them the results can be amazing. You can effectively build websites to a customer’s preference. The whole code injection thing is really amazing. 🤩
 

THE CODE

So this is the code. To explain a little the .notion-title-wrapper class is what I’ve found to be where the page title is and if you target that and make it brighter then the title of the site will pop. And in addition you target the .pallet-0 class and make that darker so it fades into the background. Higher percentage means brighter and lower percentage means darker
 

CONCLUSION

There are other ways of doing this and more so I will definitely be researching them as my journey continues. The best way to learn coding is by actually building stuff…duh! I know. Seems so simple and yet it makes so much more sense for me now then it did 3 years ago when I bought a Full Stack Webdevelopment Course on Udemy 🤣
I’m getting more and more confident that I can build a reasonable percentage of websites out there using Popsy and custom code. Had to implement this for a clients site and the results were satisfactory 😎
 
 

LIKED THE CONTENT?

Untitled (13).png
SMOOTHIE

BUY ME A SMOOTHY 😁

 
 
 
GO BACK

Get a personal website in minutes.

notion image
No coding or design skills required.
 
badge