Jump to content

Creating Full-Width Image Blocks

Recommended Posts

Site URL: https://paddlefish-hawk-wdag.squarespace.com/

Pass - 123123

I'm trying to bring two images flush with the borders of a block -

864365779_ScreenShot2020-08-30at4_58_10PM.thumb.png.2bab9aa6ca5b6ba385c034971b52bf94.png
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

1384223613_AlteredScreenshot.thumb.jpg.b5d3fbbd84e4d9d2f7a654cc7d6bce40.jpg
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
  • Replies 1
  • Created
  • Last Reply

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/

image.thumb.png.78df0644afe4e6d8b8ccd0618e0c5719.pngimage.thumb.png.28d929864e586788a9910f2f3ed8266b.png

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.