Jump to content

How to have an image span the entire section, with no padding or margins

Recommended Posts

I am attempting to have an image take up the entirety of a section of my homepage, then overlap it with the above section using margin-top: -20px (or something along those lines), however I am unable to determine how to make the image span the entire section to begin with. Does anyone have any ideas? Using the Banner media option doesn't achieve what I'm looking for.

exampleinside.jpg

exampleoverlay.jpg

 

Edit: The image of Dwayne "The Rock" Johnson is just an example transparent image I found off Google in order to convey my idea. All rights reserved.

 

Below is an image of what I've been able to accomplish so far. This method is flawed once I add my actual text into the Lorem ipsum I have in the image. Here is the code: 

<style>
  .test { padding:0px;background-color:none;position:absolute;margin-top:-150px;height:700px;width:700px;}
</style>
<img class="test"  src="https://static1.squarespace.com/static/5cb22a989b8fe830d1092c0d/t/5e12487508c15a57c853b6d8/1578256554557/transparentrock.png?format=500w">

250904732_Screenshot(7).thumb.jpg.ab9435be566fa966a1afa6214cf71b9d.jpg

Link to comment
  • Replies 0
  • Views 406
  • Created
  • Last Reply

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.