Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]

by

Updated 2018

Bootstrap 4, the concept is still the same: https://codeply.com/go/ffaQgse2SU

I have answered similar questions on this, but yours is a little different because the background-image. The best way I’ve found is using a CSS pseudo element becuase it adjusts along with right col-md-6 and therefore works responsively.

Bootstrap 3 Demo: http://codeply.com/go/rWOGi4LrU1

.right {
    z-index: 0;
    color: #fff;
}

.right:before {
    background-image:url(..);
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */
    top: -15px;
    left: -15px;
    bottom: -15px;
}

Demo

Also see:
Get Two Columns with different background colours that extend to screen edge

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. Bootstrap 4 Carousel “Half of previous”
  3. Importing CSS and Bootsrap in HTML code
  4. Bootstrap column on mobile positions
  5. vertical-align with Bootstrap 3
  6. How to vertically center a container in Bootstrap?
  7. `col-xs-*` not working in Bootstrap 4
  8. How do you get centered content using Twitter Bootstrap?
  9. How to remove the gutter (spacing) between columns in Bootstrap?
  10. Bootstrap 4 Cards of same height in columns
  11. Gap in Bootstrap stacked rows
  12. Is inside block correct?
  13. Hiding elements in responsive layout?
  14. How to vertically center a Bootstrap carousel-caption?
  15. Exclude menu item from the collapse of bootstrap 3 navbar
  16. Align the form to the center in Bootstrap 4 [duplicate]
  17. Inline Form nested within Horizontal Form in Bootstrap 3
  18. Same height column bootstrap 3 row responsive
  19. Why does `transform` break `position: fixed`?
  20. Change Bootstrap input focus blue glow
  21. Maintain image aspect ratio in carousel
  22. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  23. Fixed footer in Bootstrap
  24. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  25. How can I make Bootstrap 4 columns all the same height? [duplicate]
  26. Changing image src depending on screen size
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Why is my .sticky-top class not working in Bootstrap 4?
  29. Sticky footer with flexbox
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment