Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating Full-Width Image Blocks


Pirastro
Go to solution Solved by bangank36,

Question

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!

Edited by Pirastro
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 1

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...