CODEWITHSUNDEEP
htmlcssbackground-imagebackground-positionbackground-size
Lokasa Mawati
Lokasa Mawati

Reputation: 481

How to have background image that is centered/covering the div, but with padding

I have the following HTML:

<!doctype html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }

      body {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }

      * {
        box-sizing: border-box;
        position: relative;
      }

      body > header {
        width: 100vw;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }

      header {
        display: flex;
        flex-direction: column;
      }

      header > section {
        display: flex;
        flex-direction: row;
        flex: 1;
      }

      header > section > figure {
        flex: 1;
        background: red;
        padding: 10px;
      }

      header > h1 {
        padding: 10px 20px;
        font-size: 20px;
        background: black;
        color: white;
      }

      header > section > figure > img {
        max-width: 100%;
        height: auto;
        background: green;
      }

      header > section > aside {
        width: 300px;
        display: flex;
        background: yellow;
      }

    </style>
  </head>
  <body>
    <header>
      <section>
        <figure>
          <img/>
        </figure>
        <aside>
          <img/>
        </aside>
      </section>

      <h1>Hello World</h1>
    </header>
  </body>
</html>

I would like to have the image be centered with padding of at least 50px in every screen size and orientation. That's pretty much it. Can't figure it out.

For example, the green area/image in the example should show an image that is not stretched, that has some padding around it so you can see the full red figure around it.

Upvotes: 0

Views: 39

Answers (0)

Related Questions