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.
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).
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.
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.
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:
height
padding-top
and/or padding-bottom
img
s)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.