Creating Full-Width Image Blocks

Pirastro · 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!

Edited August 30, 2020 by Pirastro

Beyondspace · 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/

Creating Full-Width Image Blocks

Recommended Posts

Pirastro

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Beyondspace

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources