I'm trying to achieve a unique layout using Zurb Foundation. My goal is to have two columns, each taking up half of the screen:
<div class="small-6 columns"><!-- INSERT IMAGE HERE --></div>
<div class="small-6 columns">
<h1>title</h1>
<p>Content</p>
</div>
I am aiming for the following visual effect:
However, I am encountering some challenges:
- If I simply use an
<img/>tag, the "cover" effect does not fully cover either the width or height. - If I apply
background-image:to the
, the image does not display.<div class='small-6 columns'> - The padding on the left/right of the columns prevents the image from completely covering the container. Although I am hesitant to remove it as I do not want to disrupt the responsiveness of the columns.
Current Code:
Markup:
<div class="small-12 medium-6 columns thumb-bg"></div>
<div class="small-12 medium-6 columns>
<h1>title</h1>
<p>content</p>
</div>
SCSS:
.thumb-bg {
background-image: url('www.image-url.com');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}