![]() You will also have to make sure both sections have the same height of course (which you can do by giving the section a fixed height in the design –> sizing tab) and if you’re using a shape divider, both headers should have that too.Īlternatively, you could also put the background image on the section, and use just one full width row without any margin and give that the background color. If you need to use this anywhere else on the site, you might have to play with that a bit, or use (negative) margins to get the copy section in the right place. In my case, the section was the header so I didn’t have to use a top or bottom value, because the absolute position sticks the section on the top of the page. I did that by giving the copy an absolute position (in section settings –> advanced tab –> position). Next, you’ll have to place both sections over each other. The original section still contains all the content, and a background color with the desired opacity op 90%. Create a CSS color overlay allowing for readable text over the background image or background color with overlay class Overview Example Default overlay. The only thing that IS still in that copied section, is a background image. Specify the background-image and other background properties for the 'image' class. The way I did it was by creating a copy of my section, and delete all the content from that copy. Set the width, height, and background-color for the overlay class. You can also get a beautiful subtle effect by choosing two colors that a really close together,įor example a lighter and darker shade of the same color. All you need to add a div with a class name overlaytwo and we will. There is nothing special coding required. The first color has a very mild opacity, and the second color doesn’t have any opacity so the bottom part of this section is just solid yellow. How to Create CSS Background Image Color Overlay. You can set the same opacity for both colors, but you could also play with that a bit to get a cool effect like I did with the background of this section. If you want to use a solid color, just select the same color twice.ģ) Set the switch under “Place Gradient Above Background Image” to “yes”.Ĥ) Use the opacity bar to set the desired transparency, so the image becomes visible. When you flip that switch to “yes”, the gradient will overlay the image.ġ) Click on the third icon (image) under the background options to select your background image. Next, click on the second icon (gradient).Ģ) Select the gradient colors you want to use. When you use a background gradient in combination with an image, you’ll get a switch ![]() I recently learned there’s a much easier way than the one I described below to get an overlay in the right color: use the background gradient option instead of a solid background color.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |