Bootstrap 图像背景以覆盖容器内的全宽

Question

Since yesterday I am trying to get the effect that image was outside left and text div was still in container grid. I cannot use container-fluid because then text div gets fluid, and I do not want it to cover the full width on right side. Any tips?

Code: https://www.codeply.com/go/vTLom0BFoh

Answer 1

Use m-0 to container what means the margin will be 0px
Bootstrap 4 spacing: https://getbootstrap.com/docs/4.0/utilities/spacing/

 .left { z-index: 0; color: #fff; } .left:before { background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop="); background-repeat: no-repeat; content: ''; display: block; position: absolute; z-index: -1; width: 100%; top: -15px; left: -15px; bottom: -15px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div class="container m-0"> <div class="row"> <div class="col-sm-6 left"></div> <div class="col-sm-6"> <h2>Title section</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p> </div> </div> </div>

Answer 2

if your image is cropped you can use

.left:before{background-size: cover;}

but make sure you are using proper image in order to look like it wont compress

Answer 3

Image is not shown fully then you use .left:before { background-size: contain; } or .left:before{ background-size: cover; } in CSS it can solve your problem

Answer 4

You can use a container-fluid , and then manually style the right column so that it only takes half of the width of a non-fluid container.

Here's a working demo:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <style> .left { z-index: 0; color: #fff; } .left:before { background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop="); background-repeat: no-repeat; content: ''; display: block; position: absolute; z-index: -1; width: 100%; top: -15px; left: -15px; bottom: -15px; } /* $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px ); */ @media(min-width: 576px) { .col-not-fluid { flex-basis: 270px; max-width: 270px; } } @media(min-width: 768px) { .col-not-fluid { flex-basis: 360px; max-width: 360px; } } @media(min-width: 992px) { .col-not-fluid { flex-basis: 480px; max-width: 480px; } } @media(min-width: 1200px) { .col-not-fluid { flex-basis: 570px; max-width: 570px; } } </style> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 left"></div> <div class="col-sm-6 col-not-fluid"> <h2>Title section</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p> </div> </div> </div>

Note: solution adapted from this answer .