kingcomposer-background-overlay-gradient

Intro#2: Background image overlay and gradient features

We hard working on version 2.5 with many news features. In this series INTRO, I will go though each feature and how we combined them on a page. This week I will talk about the background image overlay and gradient. They help you have nice hero image or solve issues with complex colorful background image.

 

Background Overlay

You have nice image but it is hard to put text or content into that section for readable. Overlay color over image is best solution. Your reader still can see image and read text easy.

For example image bellow, I want to have a white text on this image, but it is hard to read text.

kingcomposer-overlay-1

 

Now, I will use a dark overlay color with transparent. You can easy do that with the KingComposer background setting of row. We just use one color for overlay.

 

kingcomposer-overlay-2

 

And result

kingcomposer-overlay-3

 

 

Background Gradient

In case you want to have a gradient with multi colors on a background, no problem, it is easy to do with Kingcomposer background setting

kingcomposer-gradient-1

 

You can custom degrees of colors to have more effects such as fill from right to left, top right corner to bottom left corner..etc

For more practice, you can do that on our demo site at http://demo.kingcomposer.com

 

If this has helped your website has more nice hero image please give it a share on social media!

 

  • Hi and thank you for the blog post i have been on the lookout for this certain information on-line for sometime now therefore appreciate it.