Question 259292 in Html Question posted in
Some basic documentation can be found here.

Html – Background image of a column goes to end of screen

I have a WordPress block I’ve made and I’m trying to get the image (background image) to break the container and extend beyond to the end of the screen. How can I achieve this?

enter image description here

.container {
  max-width: 80%;
  margin: auto auto;
}

.row {
  display: flex;
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col border" style="background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/ cover; min-height: 460px;">
    </div>
    <div class='col'>
      <h2 class='copyimage__title'>My Title</h2>
      <div class=" body">This is the copy</div>
      <div class="align-items-center">
        <a href=" #" class="btn btn-primary">
                  Button
                </a>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    This code will put the background image outside the container.

    .container {
  max-width: 80%;
  margin: auto auto;
}

.border {
  border-bottom-left-radius: 50%;
  max-width: 280px;
  width: 100%;
  height: 360px;
  position: absolute;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6">
      <h2 class='copyimage__title'>My Title</h2>
      <div class=" body">This is the copy</div>
      <div class="align-items-center">
        <a href=" #" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
</div>

<div class="border" style="background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/ cover;">
</div>
    Login or Signup to reply.
  2. 0

    You can set a negative margin to .border. But for this you need to know the width of the .container.

    I see you set .container { max-width: 80%; }. It doesn’t work now because bootstrap styles are added later. But for an example solution to your problem, we’ll add !important and assume the width of the container is 80vw.
    Then we set .border { margin-right: calc((100vw - 80vw) / -2) }

    P.S. You will have to now also install body{ overflow-x:hidden; } because vw don’t take scrollbar into account. In bootstrap, by the way, the width of the container is fixed. You can put it in a css variable and use it in a similar way. It’s a wonder they haven’t done it yet…

    body {
  overflow-x: hidden;
}

.container {
  --container-width: 80vw;
  max-width: var(--container-width)!important;
  margin: 0 auto;
}

.row {
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
  margin-right: calc((100vw - var(--container-width)) / -2); /* 👈 */
}

.body {
  margin-bottom: 15px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col border" style="background: url(https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80) no-repeat center/ cover; min-height: 460px;"></div>
    <div class="col">
      <h2 class="copyimage__title">My Title</h2>
      <div class="body">This is the copy</div>
      <div class="align-items-center">
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search