![]() ![]() The reason behind this is that if we want the image to stay put on scroll, we need to fix it to the background somehow.Ī quick way to do that is by using the background-attachment property when setting a background image via CSS, but the problem is that the final result seems to be inconsistent for different browsers, particularly mobile browsers, so your background may not behave the way you want it to all the time if you take this route (you can learn more about its browser compatibility here).Īnd, since we can’t fix the whole body element without messing up our site’s layout, a better solution is to use a pseudo-element. Now, we’re not going to add it directly to the body element, instead we’ll be creating a pseudo-element to hold it. ![]() This will make the image show up behind our header and footer, if we want to. when hovering over the image itself, when hovering over the excerpt or at any point when the mouse enters the entire slide) you may need to target the :hover mode of a different selector. For more information, visit In this tutorial, we are going to add a gradient overlay to the banners on an index page in Brine. Keep in mind that depending on when you want the hover to appear (e.g. Plus, this is a great way to be able to use the same designs in multiple places (like a Call to. How To Create A Gradient Index Page in Squarespace - Brine Theme Only CUSTOM CSS VERSION 7 This tutorial is for the BRINE/BEDFORD theme of Squarespace, built with an older version. With most templates in squarespace, (I like the Brine family, myself) the index option is standard, so theres no coding needed. To create our effect, we’ll be adding a background image to the entire body of our site. What I like about an index page is that it allows for full page imagery (like you have with a page banner or hero image). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |