Pirastro Posted August 30, 2020 Share Posted August 30, 2020 Site URL: https://paddlefish-hawk-wdag.squarespace.com/ Pass - 123123 I'm trying to bring two images flush with the borders of a block - The green and white gradients are PNG files I've uploaded that I would like to have sitting flush against the bottom of the block and below the navigation bar Here's an example of what I'm looking for. I'm basically trying to find a way to blend the nav bar into the image, which then blends into the block below and thought this might be a possible solution - is this possible? Is there a better way to do what I'm ultimately looking for? Thanks in advance! Link to comment
Beyondspace Posted August 31, 2020 Share Posted August 31, 2020 I saw you used jquery for the snippet so I suggest the chages like <style> .fadesection { content: ''; position: absolute; width: 100%; background: rgb(255,218,14); background: -moz-linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); background: -webkit-linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); background: linear-gradient(0deg, rgba(255,218,14,1) 0%, rgba(198,62,37,0) 9%, rgba(40,34,83,0) 93%, rgba(31,32,86,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffda0e",endColorstr="#1f2056",GradientType=1); } </style> <script> $(document).ready(function() { $('section.page-section[data-section-id="5f480e5b14bf3a6b4cab2492"]').append("<section class='fadesection'></section>"); var section = $(".fadesection").closest("section.page-section"); $(".fadesection").css({ top: $("#header").height(), height: section.height() }); $(window).on("resize", function() { $(".fadesection").css({ top: $("#header").height(), height: section.height() }); }); }); </script> For the gradient options, please using this site for generating https://cssgradient.io/ BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.