Search code examples
htmlcssbackground-imagepadding

Why does padding affect whether or not a background image shows up?


I'm trying to build a simple responsive design. At this point, I'm just battling with the header. I'd like to have a background image in the header, and as the screen size gets bigger, a different image to appear in its place. Right now I just want to get the iPhone 5/SE screen size to work. The HTML has a simple div:

<div class="header"></div>

And I am including the viewport meta tag everyone's talking about:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS has the following:

* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 320px) {
  .header {
    padding: 5em;
    background: url(images/header-320.png) no-repeat top left;
    background-size: contain;
  }
}

When I remove the padding setting, the image disappears. If I set the padding to anything less than 5em, it adds a space between the right side of the image and the right side of the screen.

  • Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?
  • If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
  • Maybe there's a clever workaround solution that I should use instead?

P.S.: this is for an eBay template, so I need to be able to do this without any JavaScript (they don't allow it).


Solution

  • Without padding/height

    Take the below example:

    console.log(`Header height: ${header.clientHeight}px`);
    #header {
      background-color: red;
    }
    <div id="header"></div>

    I have set the #header element to have a background-color: red, but you can't see any red colour, right? Because the element's height is 0px by default, so the element is essentially not visible.

    With padding/height

    Now see this example with padding:

    console.log(`Header height: ${header.clientHeight}px`);
    #header {
      background-color: red;
      padding: 5em;
    }
    <div id="header"></div>

    Notice the height is now 160px, and you can see a big pile of red.

    To answer your question

    Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?

    Padding is not necessary. But the height of an element is.

    To give height to an element, you can either:

    • Set height
    • Set padding-top and/or padding-bottom
    • Give HTML content (with height) to the element (i.e. texts, imgs)

    If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?

    No. Read above.

    Maybe there's a clever work-around solution that I should use instead?

    No. Read above.

    PS

    By default, elements with default display: block will have a default width: 100%, but no default height value. That is why you can see the border span 100% in width but 0px in height.