HTML background-color : Is it possible to fill the screen from a div?

Question

I have an issue with the reponsive of my website. In desktop mode, I have a div in the center of my screen with a grey background-color. In tablet mode, I would like to let my div and its content centered in the screen, but fill the entire width of the screen with grey. Is it possible?

@media screen and (min-width: 767px) and (max-width: 1366px) {
  .backgroundGrey {
    background-color: #F2F2F2;
    /* please tell me it's possible */
  }
}

<body>
  <section>
    <div class="flexCenter backgroundGrey">
      <div>
        <h2>Content
                
          <h2>
        
      </div>
    </div>
  </section>
</body>

EDIT with solution

Thank you all for your answers, I mixed it up and found a solution to my problem. I added a new div with my background-color set in position absolute:

<body>
    <section>
        <div class="backgroundGreyFullWidth"></div>
        <div class="flexCenter">
            <div>
                <h2>Content</h2>
            </div>
        </div>
    </section>
</body>

@media screen and (min-width: 767px) and (max-width: 1366px) {

    .backgroundGreyFullWidth {
        background-color: #f2f2f2;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 650px;
        left: 0; 
        right: 0;
    }
}

Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — maxshuty, Jun 24 '21 at 10:52
You can make your background element fixed and stretch it, like so: `.backgroundGrey { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #F2F2F2; /* other attributes to position content inside */ }` — Yuriy Yakym, Jun 24 '21 at 10:57
@YuriyYakym Thank you very much! I choose position:absolute instead, but you really helped me — Jeireme, Jun 24 '21 at 12:36

score 0 · Answer 1 · 2021-06-24T12:46:32.867

0

Use width and height 100%

.backgroundGrey {
       background-color: #F2F2F2;
       width:100%;
       height:100vh;
       display:flex;
       justify-content:center;
       align-items:center;
   }

<div class="backgroundGrey">content</div>

edited Jun 24 '21 at 12:46

answered Jun 24 '21 at 10:52

This also changes the size of my content, which I wanted to keep centered in the screen – Jeireme Jun 24 '21 at 11:36

score 0 · Answer 2 · answered Jun 24 '21 at 11:03

0

you must using the two div, first div for background color and second div for Keep content

Follow the codes below :

<body>
   <section>
      <div class="flexCenter backgroundGrey">
         <div class="content">
            <h2> Content <h2>
         </div>
      </div>
   </section>
</body>


@media screen and (min-width: 767px) and (max-width: 1366px) {

   .backgroundGrey {
       background-color: #F2F2F2;
       width : 100%;
       height : 100%;
   } 
   .content{
       width:200px;
   }

}

answered Jun 24 '21 at 11:03

mohammad yg

26
3

So there is no other way... I summarized my code but this div is in the middle of other divs, it would have be perfect to fill the screen with a background property because otherwise I have to change everything. But that's alright, let's go! – Jeireme Jun 24 '21 at 11:32

score 0 · Accepted Answer · answered Jun 24 '21 at 12:38

0

Just use absolute or fixed positioning and tie element to each side, like so:

.backgroundGrey {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #F2F2F2;
  /* other attributes to position content inside */
}

answered Jun 24 '21 at 12:38

Yuriy Yakym

3,616
17
30

HTML background-color : Is it possible to fill the screen from a div?

3 Answers3