Is there a way to make this header 'full width' so that the image appears on the left side of the screen while keeping the content in the grid?
https://i.sstatic.net/U6pft.png
I was considering creating a new container.
.container--full { max-width: 1400px; width: 100%; }
The max-width of my .container grid is set to 1170px. This new container is wider than the .container class.
To achieve this, I would set a background-image aligned to the left with a grey background color. Inside the .container--full, a nested .container is created.
<div class="container--full">
<div class="container">
</div>
</div>
Experimenting with container-fluid...
https://i.sstatic.net/yYAKS.png
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}