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

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

Recommended Posts

Posted (edited)

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

Edited by Stoops
Adding additional information

Share this post


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...