how to stretch layout across screen but keep content narrower?

Question

Quick question:

How do I create a layout where all the elements' backgrounds stretch across the width of the screen, but the content stays narrow, let's say 1000px? I'm looking to come up with something like this:

https://themeforest.net/item/itcore-site-template/3638733

For the record, I know how to code, I just don't know what the best approach is to this. I'm sure there's a 'best practice' to achieve this and having built 100% width dashboards only, I never worked with it.

Any tips?

Answer 1

You simply combine two elements, one that will fit the window (on which you can apply some background and other styling that cover the viewport), and another container in the center of the page. I recommend you to use max-width to allow it to shrink on smaller devices.

<div class="section">
  <div class="wrapper">
    Some content
  </div>
</section>

Then your CSS is as simple as

.section {
  background: (...)
  background-size: cover; /* stretch to cover the whole container */
}

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

Take a look at CSS Background size property. You can specify a fixed value in units, for example:

background-size: 100vw;

which would occupy the width of the screen.

Answer 3

Thanks LeBen, that's what I was looking for. I ended up creating a wrapper class that can be used for all elements and is styled using individual classes. Inside goes content like header, main, footer etc. and these are scaledwith media queries according to screen resolution.

<div class="wrapper bgLight">
    <header>
        Header content goes here
    </header>
</div>

Thanks again!