Bootstrap with a fixed width grid and images that should span the window width

Question

I would like to display the image outside the containers width, filling up to right edge of the browser.

At the moment I'm doing this with JavaScript, but I feels and looks clumsy, and SEO is unfriendly because of missing ALT-tags and also introduces problems when the css triggers different viewport settings for smaller screens.

Is there a documentation chapter I've missed?

My current set up:

<div class="container-fluid screen-image" style="background: url('image.png') no-repeat;" data-position-object="screen1">
  <div class="container">
    <div class="col-md-6">
      my content
    </div>
    <div class="col-md-6" id="screen1">
    </div>
  </div>
</div>

Javscript:

$(document).ready(function () {
    setScreenPositions();

    $(window).on('resize', function() {
       setScreenPositions();
    });

    function setScreenPositions() {
        $('.screen-image').each(function() {
            var $this = $(this),
                $positionObject = $('#' + $this.attr('data-position-object'));

            $this.css('background-position', $positionObject.position().left + 'px 60px');
        });
    }
});

To better illustrate what I'm after, I've put my Word drawing skills to the test since I'm not at my own computer at the moment ;)

Answer 1

You can use the vw unit to set the image width to 50% of the viewport width. You will need to zero out the padding on grid cell which wraps the image. The vw unit is supported by all major browsers:

.row .col-img-wrap {
  padding-left: 0;
  padding-right: 0;
}
.col-img-wrap img {
  width: 50vw;
}
.col-align-right img {
  float: right;
}
/* not needed */
.container {
  border: 1px red solid
}
.row {
  background-color: #bca;
}
.col-xs-12 { 
  text-align: center;
  padding: 3em;
  background-color: #abc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-6">
        This is some content inside a col-xx-6 cell
      </div>
      <div class="col-xs-6 col-img-wrap">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-12">
        This is some content inside a col-xx-12 cell
      </div>
      <div class="col-xs-6 col-img-wrap col-align-right">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-6">
        This is some content inside a col-xx-6 cell
      </div>
    </div>
  </div>
</div>

Answer 2

Try the following HTML structure:

<div class="container-fluid screen-image">
    <div class="row">
        <div class="col-md-offset-6 col-md-6 col-sm-12 image-content">
        </div>
    </div>
</div>

<div class="content-wrapper">
    <div class="container">
        <div class="col-md-6">
            my content
        </div>
        <div class="col-md-6">
            content 2
        </div>
    </div>
</div>

Then use this CSS:

    .screen-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0; /* Cover the full screen width */
    }

    .screen-image .image-content {
        height: 400px; /* Dummy height. Change with your desired height */
        background: url("image.png") no-repeat;
        background-size: cover; /* Anything that suits your needs */
        background-position: 0 0;
    }

    .content-wrapper {
        position: relative; /* Go on top of the screen-image */
    }

Here is a quick explanation:

• We set position: absolute on the background image container. We don't want it to push the content down.
• Screen-image padding of 0 will null the default .container-fluid padding thus making the image cover the whole screen.
• For the content we'll need position relative. Otherwise it will appear under the .screen-image element.
• On the .screen-image .image-content we need to set .col-sm-12 to make it cover the whole screen on mobile. We don't have 2 columns there so it makes sense to cover the whole screen with the background image.

EDIT (img tag)

Example with SEO friendly image tag: http://codepen.io/avladov/pen/bpKvYd