seo Question posted in
Some basic information to get you started with this can be found here.

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

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 😉
enter image description here

Tags:

9

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    It’s not the prettiest solution but it does work. It’s not as fluid as I would like to see.

    http://codepen.io/iMarketingGuy/pen/BKVmMj

    CSS

    html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-top: 40px;
    margin-bottom: 40px;
}

.row img {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.floatRight {
    float: right !important;
}

.image {
    float: left;
    width: 100%;
}

.image img {
    float: left;
    width: 100%;
    height: auto;
}

    JavaScript

    var containerWidth = $(".container").width();

if (containerWidth > 750) {
    $("#row-1-image-col").css({ "position": "absolute", "right": "0", "margin-right": "-15px" });
    $("#row-3-image-col").css({ "position": "absolute", "left": "0", "margin-left": "-15px" });
} else {
    $("#row-1-image-col").css({ "position": "relative", "padding": "0px 15px" });
    $("#row-3-image-col").css({ "position": "relative", "padding": "0px 15px" });
}

var row1ImageColHeight = $("#row-1-image-col").height();
var row1TextColHeight = $("#row-1-text-col").height();

if (row1ImageColHeight >= row1TextColHeight) {
    $("#row-1").css("height", row1ImageColHeight + "px");
} else {
    $("#row-1").css("height", row1TextColHeight + "px");
}

var row3ImageColHeight = $("#row-3-image-col").height();
var row3TextColHeight = $("#row-3-text-col").height();

if (row3ImageColHeight >= row3TextColHeight) {
    $("#row-3").css("height", row3ImageColHeight + "px");
} else {
    $("#row-3").css("height", row3TextColHeight + "px");
}
    Login or Signup to reply.
  3. 0

    It looks like this happening because you have used container inside container-fluid. Please try replacing your container class with row class. It will solve your problem for sure.

    Best luck.

    Login or Signup to reply.
  4. 0

    end container before full size width section, dont mix container with container-fluid. you can have multiple container( container and container fluid one after another. Dont use js if you can use css. Use bootstrap grid. Also you can use flex grid for more complicated aligned grids if you dont have to cover older browsers. If you want full screen background, use backgroung with cover property on higher elemrnt ex. on body tag.
    If you want to have full width solution under centered grid, put container inside the div with image bg.

    html:

    <div class="screen-image">
<div class="container">
<div class="col-xs-6">lorem impsum dolor
    </div>
        <div class="col-xs-6">lorem ipsum dolor 
    </div>
</div>

    css:

    .screen-image {

background-image:  url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");

background-position: right top;
background-size: 50% 60px;
background-repeat: no-repeat;}

    also you can put img just like regular content inside the col-xs-6 – it will overflow, and use overflow hidden on ex body to remove the horizontal sliders.

    the solution i would choose would be background image set as 50% of the window size in css. – it will be aligned with the grid then.
    also you can manage how it works on different resolutions by media queries.

    Login or Signup to reply.
  5. 0

    According to Bootstrap Docs, your HTML is incorrect,

    • you shouldn’t have a .container right after a .container-fluid
    • after a .container you should have a .row

    With the correct HTML and from what I’ve understood, you just need to reset the bootstrap default padding given in the col- classes.

    UPDATE

    You will need to give a width to your container-fluid and then use position:relative (which bootstrap already have in -col) and using calc() along with viewport units.

    Note I use !important just for the demo get simpler. in Production avoid using !important by getting more specific on the CSS rule.

    body {
  background: rgba(255, 255, 0, .5) !important
}
.container-fluid {
  background: rgba(255, 0, 0, .5);
  width: 70% /*adjust the width accordling to your needs*/
}
[class$="-6"] {
  /*all classes ending with "-6" */
  border: 1px green solid;
  padding: 0 !important;
}
/* the -70vw should be equal to the % width of container-fluid */
.row div:first-of-type {
  left: calc(-70vw + 80%) 
}
.row div:last-of-type {
  right: calc(-70vw + 80%)
}
img {
  opacity: .65
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-6">
      my content
    </div>
    <div class="col-xs-6 col-md-6">
      <img class="img-responsive" src="//lorempixel.com/1000/300" />
      <!-- this should size up to right end of the window, meaning it should overflow .col-md-6 and .container -->
    </div>
  </div>
</div>
    Login or Signup to reply.
  6. 0

    I wouldn’t think you need javascript. When it comes to bootstrap you just need to think of all the pieces in a puzzle.
    container-fluid makes it possible for full width screen.
    Adding container col-md-6 makes one column with max width. Then a container-fluid col-md-6 makes a half page column with no max width for images to the edge. Here is my codepen, a more concise version from the guy above.

    http://codepen.io/MrNagoo/pen/jqvyeP

    Of course, it’s pretty easy to make your own containers with css while still using bootstrap.

    Login or Signup to reply.
  7. 0

    First, I’d recommend not use two containers (which doubles the grid gutter width), but use only one container and also use a row in order to have every column aligned as the were initially made.

    Something like below:

    <div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde odio assumenda omnis, sunt, quam cum, animi minus fugit, voluptate adipisci illum officiis in non. Animi officia eligendi quos? Est?</p>
    </div>
    <div class="col-md-6">
      <div class="image"></div>
    </div>
  </div>
</div>

    As you can see, I quite changed a bit how the divs should be ordered.

    Now, how I would solve your issue, is putting a div inside that column that you want make an image outside the container.

    You can use an img tag instead of the div.

    I will show you an example by using the div and applying background-image to it.

    We can achieve the desired effect, if we apply the CSS below:

    .image {
  background-image: url('http://lorempixel.com/1024/768');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: calc(50vw - 15px);
}

@media (max-width: 991px) {
  .image {
    width: 100%;
  }
}

    NOTE: We can use viewport width unit to the div inside the column and just take off the grid gutter width by by calculating it the way above.

    Explanation: Viewport width (vw) is a unit which calculates the whole width of your current screen, never minding what size does the parent div have.

    Can I Use it? vw is now supported in most modern browsers.
    http://caniuse.com/#feat=viewport-units

    As for the @media query, I assumet in smaller screens than md image should be applied 100%.

    You can see this working, in the Codepen below:
    http://codepen.io/ArdianPerlaska/pen/dMqWKp

    Login or Signup to reply.
  8. 0

    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:

    enter image description here

    .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>
    Login or Signup to reply.
  9. 0

    i acomplised it with a absolute position element as a sibling of the container.
    see codepen:

     .absolute {
  position: absolute;
  width: 100%;
  height: 500px; //this needs to be fixed always, can be customized through media queries
  .white, .gray {
    float: left;
        width: 100%;
    height: 200px;
    background-color: #e3e3e3;
    @media (min-width:576px){  //make it match with the switch columns/trigger with columns changes
    width: 50%;
    height: 100%;
    }
  }
  .gray {
    background-color: gray; 
    background-image: url('http://www.dailyfreepsd.com/wp-content/uploads/2013/09/sunset-blurred-background-freebie.jpg');
    background-size:cover;    
  }
}


.fixed-height{
  height: 200px; //this needs to be fixed always, can be customized through media queries
  .title, .lead, .list{
    color:white;
  }

}

    working pen here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search