OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

A smarter way to "offset" an element from its container (with background)?

  • Thread starter Thread starter Luca Reghellin
  • Start date Start date
L

Luca Reghellin

Guest
I've got to do a layout like this:

enter image description here

As you can see, the hero image is 'offsetted', background being shorter of it. I managed to do it with nested css grids and a 'dummy' element to add background, but I was wondering if there are smarter ways than using a dummy element... I'm posting a codepen because this built-in editor seems not to correctly render the code I used. I commented it all to explain the important bits.

https://codepen.io/stratboy/pen/YzbbXVa

I'm forced by Stackoverflow to write some code.. Here is some HTML:

Code:
<div class="wrapper">
  <div class="container">
    <div class="bg">
    </div>
    <div class="child">
      <div class="offset image">offset</div>
      <div class="text">Lorem Ipsum</div>
    </div>
  </div>
</div>

And (S)CSS:

Code:
    .wrapper{ // just to simulate real website
      width: 1200px;
      margin: 0 auto;
    }
    
    .container{ // main grid
      display: grid;
      grid-template-rows: 80px auto 120px;
      grid-template-columns: 1fr;
    
      // full width
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
    }
    
    .bg{ // dummy element  for background
      background-color: teal;
      grid-row: 1 / 3;
      grid-column: 1 / 2;
    }
    
    .child{  
      width: 1200px;
      margin: 0 auto;
      grid-row: 2 / 4; // offset for simulated padding
      grid-column: 1 / 2;
      
      display: grid; // it is a grid itself, so I can offset the "image"
      grid-template-rows: 1fr 120px;
      grid-template-columns: 50% 50%;
    }
    
    .offset.image{
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      background-color: cyan;
    }
    
    .text{
      grid-column: 2 / 3; // restrict to first 2 rows to create the image offset
      grid-row: 1 / 2;
      background-color: green;
      padding-bottom: 80px; // just to test
    }
<p>I've got to do a layout like this:</p>
<p><a href="https://i.sstatic.net/TpOsi8gJ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TpOsi8gJ.png" alt="enter image description here" /></a></p>
<p>As you can see, the hero image is 'offsetted', background being shorter of it.
I managed to do it with nested css grids and a 'dummy' element to add background, but I was wondering if there are smarter ways than using a dummy element...
I'm posting a codepen because this built-in editor seems not to correctly render the code I used. I commented it all to explain the important bits.</p>
<p><a href="https://codepen.io/stratboy/pen/YzbbXVa" rel="nofollow noreferrer">https://codepen.io/stratboy/pen/YzbbXVa</a></p>
<p>I'm forced by Stackoverflow to write some code.. Here is some HTML:</p>
<pre><code><div class="wrapper">
<div class="container">
<div class="bg">
</div>
<div class="child">
<div class="offset image">offset</div>
<div class="text">Lorem Ipsum</div>
</div>
</div>
</div>
</code></pre>
<p>And (S)CSS:</p>
<pre class="lang-scss prettyprint-override"><code> .wrapper{ // just to simulate real website
width: 1200px;
margin: 0 auto;
}

.container{ // main grid
display: grid;
grid-template-rows: 80px auto 120px;
grid-template-columns: 1fr;

// full width
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}

.bg{ // dummy element for background
background-color: teal;
grid-row: 1 / 3;
grid-column: 1 / 2;
}

.child{
width: 1200px;
margin: 0 auto;
grid-row: 2 / 4; // offset for simulated padding
grid-column: 1 / 2;

display: grid; // it is a grid itself, so I can offset the "image"
grid-template-rows: 1fr 120px;
grid-template-columns: 50% 50%;
}

.offset.image{
grid-column: 1 / 2;
grid-row: 1 / 3;
background-color: cyan;
}

.text{
grid-column: 2 / 3; // restrict to first 2 rows to create the image offset
grid-row: 1 / 2;
background-color: green;
padding-bottom: 80px; // just to test
}

</code></pre>
Continue reading...
 

Latest posts

Top