Skip to content

[css-backgrounds] Full Width Background with Fixed Width Content? #3552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
lautarodragan opened this issue Jan 24, 2019 · 1 comment
Open

[css-backgrounds] Full Width Background with Fixed Width Content? #3552

lautarodragan opened this issue Jan 24, 2019 · 1 comment
Labels
css-backgrounds-4

Comments

@lautarodragan
Copy link

Is it possible with pure CSS to achieve the following?

<html>
  <head>
    <title>Full Width Background with Fixed Width Content</title>
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  </head>
  <body>
    <header>
      <h1>Full Width Background with Fixed Width Content</h1>
      <h2>Exploring CSS</h2>
    </header>
    <main>
      <div class="wrapper">
        <p>This section should have a background of different color.</p>
        <p>We want this background to stretch from the leftmost to the rightmost borders of the window, but the content laid out in a central column.</p>
      </div>
    </main>
  </body>
</html>
body {
  background-color: red;
}

header {
  width: 960px;
  margin: 0 auto;
}

main {
  background-color: yellow;
}

.wrapper {
  width: 960px;
  margin: 0 auto;
}

How this renders can be seen in https://codepen.io/anon/pen/PVqVYN.

This works, but forces us to introduce a non-semantic wrapper element to letter-box the content.

The evolution of CSS has allowed us to drop the use of non-semantic elements in HTML, specially with the introduction of flex and grid.

If would be interesting if we could instead do something like this:

<html>
  <head>
    <title>Full Width Background with Fixed Width Content</title>
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  </head>
  <body>
    <header class="letterboxed">
      <h1>Full Width Background with Fixed Width Content</h1>
      <h2>Exploring CSS</h2>
    </header>
    <main>
      <!-- No wrapper here --> 
        <p>This section should have a background of different color.</p>
        <p>We want this background to stretch from the leftmost to the rightmost borders of the window, but the content laid out in a central column.</p>
      <!-- /No wrapper here --> 
    </main>
  </body>
</html>
body {
  background-color: red;
}

main {
  background-color: yellow;
}

.letterboxed {
  inner-width: 960px;
  padding: 0 auto;
}

Here I'm suggesting the addition of a new sizing property, inner-width, which would allow explicit setting of the inner-size, and modification of the behavior of padding, but just as an example. This is more an open question than a proposed solution.

I believe this could be achieved with current CSS with calc without the wrapper:

body {
  background-color: red;
}

main {
  background-color: yellow;
}

main, header {
  box-sizing: content-box;
  padding: 0 calc((100% - 960px) / 2);
}

I haven't been able to find anything like this in css-sizing-4 or css-sizing-3.
@fantasai
Copy link
Collaborator

There was at one point a suggestion for a no-clip value for background-clip. Maybe that would solve the problem?

If viewport units weren't broken wrt scrollbars, another idea would be something like width: 100vw; padding: calc(50vw - 50%); margin: calc(50vw - 50%);?

@fantasai fantasai changed the title [css-sizing] Full Width Background with Fixed Width Content? [css-backgrounds] Full Width Background with Fixed Width Content? Apr 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-backgrounds-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @lautarodragan