Question 229374 in Html Question posted in
Some basic documentation can be found here.

Html – How to get CSS for header to display

I have been trying to get the header image to display responsively and worked out the problem was the image was set in the body code rather than in the CSS. However now I am having a different issue, if I remove the header image from the body then nothing will display at all in the header, the correct image will only display if I put something else over it.

Header code to start with was as follows:

<div id="header"><img src="banner.png"></div>

This results in a (wrong size) copy of the image covering the correct sized image.

If I remove the section, no header at all displays. I have tried adding text, which does appear over the image, but the previously correct sized image will then display at only the height of the text. I have tried adding height and width to the section but this appears to have no effect.

Here is some code that should reproduce the issue

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div id="container">
            <div id="headerArea">
                <div id="header"><img src="banner.png"></div>
            </div>
    </div>
  </body>
</html>

There is also the CSS bit for the header

#header {
            height: 100%;
            width: 100%;
            background-color: #080405;
            background-image: url("/banner.png");
            background-size: 100%;
        }

I’ve tried adding/removing/changing the height and width but this hasn’t helped either.

Tags:

2

Answers


  1. 0

    I don’t quite see your issue here.

    Yes, the image will not show, if you set it inside of an empty container and in CSS as a background-image. Background-image does not push up the container by itself. You need content or you define specific width and height, not just percentages.

    Lets break your problems down:

    1. Percentage width/height
    If you use e.g. height: 100%, it will take the full height of the parent element. When there is no content inside and the parent div has no height defined (e.g. width: 400px), it will have a height of 0.

    2. Background-Image
    A background-image will not give an element a height. It lives in the background and is not part of the DOM flow. However, you can set a specific height for the container. E.g. height: 400px on your #header will show the image.

    3. Img
    I recommend, if I understand your problem correctly, to use an <img src="" alt="">. This will push up the container with the correct sizes. If you want your image to have the width of that container, just set img { width: 100% } And remove width and height from #header. The image should stick to it’s proportions just fine and give your div a height.
    However, if you want to use a different image on a different viewport (as you mentioned "responsively"), you should use a <picture>. You can find an example of how to use it here.
    Sidenote: An <img> should always have an alt-Attribute. Even if the image is just for decorations. Then you can just leave it empty.

    Login or Signup to reply.
  2. 0

    You need to use 100vh instead of 100% for the header height. And you will get the expected result.

    #header {
    height: 100vh;
}

     *{
    margin: 0;
    padding: 0;
}

#header {
    height: 100vh;
    width: 100%;
    background-color: #080405;
    background-image: url("https://picsum.photos/1500/1500?random=1");
    background-size: 100%;
}
    <div id="container">
    <div id="headerArea">
        <div id="header"></div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search