html5 image header not showing

Question

I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.

this is the index.html file

<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
    <title>Erling's website</title>  
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>

This is the stylesheet

header {
    background-image: url("img/banner.png");
    background-repeat: no-repeat;
    height: 15%;
    position: absolute;
    width: inherit;
}

I do find the picture when inspect element but it looks like the height is not working.

header {
  /*DEMO*/background-color: red;
  background-image: url("img/banner.png");
  background-repeat: no-repeat;
  height: 15%;
  position: absolute;
  width: inherit;
}

<!-- HTML 5 -->
<!DOCTYPE html>
<html>

<head>
  <title>Erling's website</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>

<body>
</body>

</html>

15% of what? If you don't set a height on the `html` & `body` elements it won't work. — Paulie_D, Nov 26 '15 at 16:42
See this post: [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Nov 26 '15 at 17:31

score 1 · Answer 1 · edited Nov 26 '15 at 23:42

1

Question to yourself: 15% of what?

If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:

Html,body {position:relative;height:100%;}

edited Nov 26 '15 at 23:42

Nisse Engström

4,738
23
27
42

answered Nov 26 '15 at 16:50

Naci

5
3

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). - [From Review](/review/low-quality-posts/10349779) – penderi Nov 26 '15 at 17:40
İ just want help him but my english :/ i dont criticize – Naci Nov 26 '15 at 17:50

Aaron · Answer 2 · 2015-11-26T16:46:18.253

0

For the above percentage height to work with your header add

html, body {
 height: 100%;
}

Or change the height on the header to padding bottom.

header {
    padding-bottom: 30%;
}

edited Nov 26 '15 at 16:46

answered Nov 26 '15 at 16:43

Aaron

10,187
3
23
39

There is a height on the header...15% – Paulie_D Nov 26 '15 at 16:43
aha! i see that now... Then he needs to add `body, html {height: 100%;}` – Aaron Nov 26 '15 at 16:44
2

Indeed...I commented to that effect. – Paulie_D Nov 26 '15 at 16:44
% height does not work if the parent element doesn't have a fixed hight – CoderPi Nov 26 '15 at 16:45
nope stil not there, `position: absolute` breaks it – CoderPi Nov 26 '15 at 16:49

score 0 · Answer 3 · answered Nov 26 '15 at 16:49

0

The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.

html{
    height:100%;
    float:left;
    }

answered Nov 26 '15 at 16:49

SG_Rowin

622
3
19

Mi-Creativity · Answer 4 · 2015-11-26T16:57:59.883

0

You can make use of view units, vh for view height and vw for view width JS Fiddle

header {
    height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/

edited Nov 26 '15 at 16:57

answered Nov 26 '15 at 16:51

Mi-Creativity

9,554
10
38
47

score 0 · Answer 5 · answered Nov 26 '15 at 16:52

When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage

header {
    height:100px; /*You can specify your size*/
}

score 0 · Answer 6 · edited May 23 '17 at 10:29

I finally found a solution: note that also width was not working

    header {
      background-color: red; /* red for DEMO */
      background-image: url("img/banner.png");
      background-repeat: no-repeat;
      height: 15%;
      position: absolute;
      width: inherit;
    }

    html, body {
      height: 100%; /* fix height*/
      width: 100%; /* fix width */
      margin: 0; /* fix width, or margin: 0 -5px; in header {} */
    }

<!-- HTML 5 -->
<!DOCTYPE html>
<html>

<head>
  <title>Erling's website</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>

<body>
</body>

</html>

Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;

make shure to flag the answer as "accepted" if your question was solved ;) any maybe give it a *up* for motivation :D — CoderPi, Nov 26 '15 at 17:39

Noah · Answer 7 · 2015-11-26T18:45:47.900

<header> element position in html

It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.

You must move the <header> element to be inside the <body> element.

Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.

Move your <header> tag to be within <body> and go from there.

Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.

body {
    width: 100%;
}

If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.

header {
    [...]
    height: 15vh;
}

html5 image header not showing

7 Answers7