The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS using css grids with multiple background images that go outside of the grid

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #37275

    I have a more general question(s) about how to tackle layouts that visually appear to fit the grid but actually go outside the grid.

    Often I get layouts that look like this:

    My html approach would start off with:

    In the example above I use a dropshadow, but often there is some kind of background image that goes outside the grid in multiple sections (the sidebar and content). The background image often extends above and below the “section”, making it hard to tile.

    I can use box-shadow but often the layout has to be backwards compatible to older browsers (still!)

    These background images also bring up two other issues:
    1. Do I add an extra div or padding to class=”content” to handle the positioning of the image “box” and text inside of the content box?
    2. What happens if my content box stretches?

    In situations such as these, what is the best approach? Do I send the layout back to the designer and push for something that stays inside the grid? Is this a common problem that can be solved with css? (I think I have used a mix of background-positioning and negative margins combined with a wider width before, but at a certain point I felt like I wasn’t even using the grid)

    Any tips or advice would be much appreciated.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.