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

How can I stretch background color to full page width? (HTML, CSS)

I’ve a parent container PROMO, with fixed width and I need to stretch background color (#f9f9f9) to full page (wider than parent’s width). Example you can see on the screenshot.

(https://phpout.com/wp-content/uploads/2023/08/YSxpv-jpg.webp)

<section class="promo">
  <div class="promo__wrapper">
    <h1 class="promo__wrapper-title">Милые штуки ручной работы для дома</h1>
  </div>
  <div class="promo__add">
    <a class="promo__choice" href="#"><span class="promo__choice-description">Предметы интерьера</span>
      <svg class="promo__choice-lamp" width="40" height="62">
        <use xlink:href="./img/sprite.svg#lamp-icon"></use>
      </svg>
    </a>
    <a class="promo__choice" href="#"><span class="promo__choice-description">Детские игрушки</span>
      <svg class="promo__choice-cube" width="60" height="60">
        <use xlink:href="./img/sprite.svg#toy-icon"></use>
      </svg>
    </a>
  </div>
  <picture>
    <source media="(min-width: 1150px)" width="1150" height="34" srcset="./img/icons/wave-desktop.svg">
    <source media="(min-width: 768px)" width="768" height="24" srcset="./img/icons/wave-tablet.svg">
    <img class="promo__wave">
  </picture>
</section>

I tried to use background child container, but in this case, there is a horizontal scroll on the page.

(https://phpout.com/wp-content/uploads/2023/08/bwSbR.png)

.promo::before {
  position: absolute;
  content: "";
  height: 680px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #f9f9f9;
  top: 0;
  left: 0;
}
Tags:

4

Answers


  1. 0

    Creo que el problema lo tienes en el margin-left. Yo probaría a quitarlo y además resetearía los márgenes que tuviera por defecto el navegador con la siguiente línea de código:

    *{ margin:0;
   padding: 0;
 }
    Login or Signup to reply.
  2. 0 
    &:before {
  // your stuff..., remove the margin
  transform: translateX(-50%);
  left: 50%;
}
    Login or Signup to reply.
  3. 0

    Instead of doing it using before selector just make it simple,

    Give background-color: your-bg-color to the class promo and wrap inner content of class promo in another div and add horizontal padding as you need.

    <section class="promo">
    <div class="wrapper">
        <div class="promo__wrapper">
        <h1 class="promo__wrapper-title">Милые штуки ручной работы для дома</h1>
        </div>
        <div class="promo__add">
        <a class="promo__choice" href="#"><span class="promo__choice-description">Предметы интерьера</span>
            <svg class="promo__choice-lamp" width="40" height="62">
            <use xlink:href="./img/sprite.svg#lamp-icon"></use>
            </svg>
        </a>
        <a class="promo__choice" href="#"><span class="promo__choice-description">Детские игрушки</span>
            <svg class="promo__choice-cube" width="60" height="60">
            <use xlink:href="./img/sprite.svg#toy-icon"></use>
            </svg>
        </a>
        </div>
        <picture>
        <source media="(min-width: 1150px)" width="1150" height="34" srcset="./img/icons/wave-desktop.svg">
        <source media="(min-width: 768px)" width="768" height="24" srcset="./img/icons/wave-tablet.svg">
        <img class="promo__wave">
        </picture>
    </div>
  </section>

    Css will look like

    .promo {
  background-color: #f9f9f9;
} 

.wrapper{
  padding-left: 100px; // enter number that you want
  padding-right: 100px; // enter number that you want

  // or istead of padding make it center using mx-auto or something like this
}
    Login or Signup to reply.
  4. 0

    The horizontal scrollbar appears because of the vertical scrollbar. It’s width is added to the 100vw resulting the horizontal overflow. If you remove the scrollbar width from the pseudo-element then the horizontal scrollbar will go away.

    .promo:before {
    position: absolute;
    content: "";
    height: 680px;
    /* width: 100vw; */
    margin-left: calc(-50vw + 50%);
    background-color: #f9f9f9;
    top: 0;
    left: 0;

    /* added codes */

    /* Removing the scrollbar space */
    width: calc(100vw - 9px);
    /* Sending the background behind of everything */
    z-index: -1;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search