Creating a visually stunning landing page, or website is getting more an more difficult due to the ever increasing competition. Giving your users that ‘wow’ experience upon landing is very important – if you want your users to stay on the site and find out more information about you, your services, your products. One way to achieve this is with the use of color overlays on top of white or image backgrounds. Below we provide CSS code that has been tested and used in numerous WordPress sites.
Single Color Overlay.
1. Find the CSS element that contains the background image
2. Add the following CSS code for that class
.mybackgroundclass:before {
display: block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background-color: rgba(0, 0, 0, 0.45) !important;
z-index: 1 !important;
content: ' ' !important; }
You may need to experiment with different values of the z-index property to get things right.
This should give you the following result (a black overlay on the image, making the titles more emphasized):
Gradient Color Overlay.
The only thing you need to change to achieve a gradient overlay instead of a single color overlay, is this line:
background-color: rgba(0, 0, 0, 0.45) !important;
Change to:
background: -webkit-linear-gradient(left, rgba(147, 87, 204, 0.54) 0%,rgba(41, 137, 216, 0.51) 50%,rgba(44, 201, 157, 0.58) 100%);
You can play around with different colors, stops, and transparency values to achieve the desired effect.
Hope this was helpful, if you need any additional help, just let us know!
Thanks
Team Sociolus
