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

why is my image in css not showing fully in my browser? – Html

I have an image in css and i have linked the css file to a html one, but the image is only being displayed to where my text in html has reached and not covering the whole web page.

here's an image of the webpage

Here’s my css code

body {
    background-image: url("station.jpg");
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    text-align: center;
}

Here’s the html code

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>People entered:</h1>
        <h2 id="count-el">0</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat elit id enim volutpat bibendum. Donec congue, turpis sed congue consectetur, orci diam congue mauris, et volutpat augue nulla sit amet augue. Mauris bibendum nunc ante, id tempor justo fringilla id. Nullam sed magna et libero aliquam hendrerit. Morbi magna ex, hendrerit sit amet vehicula vel, sodales nec tortor. Morbi non nulla urna. Aliquam porttitor a nibh vel pellentesque. Sed cursus dignissim magna tincidunt hendrerit. Integer condimentum tortor purus, scelerisque tempor nunc gravida sit amet. Nulla suscipit tincidunt leo, non dignissim enim gravida in.

Curabitur rutrum lorem at tortor ullamcorper, in blandit lectus condimentum. Phasellus sit amet nibh pellentesque, ultrices massa et, lacinia elit. Integer non felis hendrerit, bibendum metus ut, tempor erat. Suspendisse odio neque, tincidunt eget magna ac, dictum ultricies augue. Duis ut sem rutrum ante pellentesque ornare non aliquam risus. Fusce neque tellus, cursus in nibh non, vestibulum lacinia arcu. In ac est in velit gravida tristique. Phasellus lectus enim, eleifend non bibendum a, tincidunt non nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vulputate, nisi quis pulvinar molestie, magna magna vehicula nisi, ac aliquet lacus felis iaculis augue. Suspendisse eget facilisis nibh, id ultrices est. Mauris diam urna, porttitor nec dapibus faucibus, venenatis sit amet libero. Aliquam id dignissim tortor.

Donec faucibus lorem porttitor ornare porta. Praesent faucibus gravida feugiat. Aenean erat leo, faucibus ac iaculis at, elementum ac ligula. Pellentesque dignissim porta justo. Sed imperdiet eget arcu in eleifend. Mauris et diam nibh. Aliquam posuere ligula suscipit, sodales magna eu, pharetra erat. Nulla porttitor ante at sagittis blandit. Phasellus vitae pulvinar tortor, luctus tempus odio. Aliquam erat volutpat. Donec mattis nisi eget tellus tempor semper. Sed iaculis, elit id malesuada efficitur, arcu justo elementum metus, quis egestas dui est nec elit. Proin molestie erat massa, vitae auctor nibh placerat eget.

Phasellus ac vulputate odio. Proin ornare elementum pellentesque. Suspendisse efficitur risus nulla, vitae vulputate libero semper a. Sed tempus luctus justo nec commodo. Morbi rhoncus odio sapien, feugiat dapibus turpis lacinia ac. Mauris molestie felis urna, sed interdum eros semper tincidunt. Cras vulputate lorem a tortor egestas pharetra. Fusce a enim quam. Nunc porta leo ut dui tempor, non viverra turpis imperdiet. Duis quis urna convallis, porttitor odio nec, sagittis diam. Vivamus sed sodales dolor, sit amet iaculis lacus. Proin massa ipsum, rhoncus a justo at, dictum tempus sapien. Nam dapibus, tellus eu euismod imperdiet, elit ex pretium nunc, vel imperdiet lectus metus eu augue.

Mauris facilisis ex ac lectus ullamcorper aliquet. Curabitur egestas, orci at semper rhoncus, felis magna efficitur nibh, mollis ultricies nisi turpis eget dui. Curabitur ultricies euismod suscipit. Vestibulum id eleifend leo, quis tristique velit. Aenean eget dui molestie, facilisis ipsum ac, bibendum enim. Morbi dignissim fermentum metus, ac laoreet tortor porttitor id. Aenean neque dui, consequat eget pellentesque ac, pulvinar non nulla. Donec placerat, felis quis faucibus rutrum, quam nunc hendrerit orci, at commodo lectus justo ac urna. Aliquam nisl justo, commodo id pulvinar vitae, sollicitudin id dui. Suspendisse ut nibh rutrum risus porttitor hendrerit sit amet maximus risus. Aenean scelerisque, enim vitae ullamcorper mattis, dui tellus faucibus lectus, a interdum ex tellus vel nisi. Aliquam blandit placerat odio, vel eleifend purus sagittis vehicula. Aenean sagittis posuere turpis, gravida ullamcorper nisl molestie vel. Nulla auctor, sem sit amet placerat congue, risus ipsum blandit metus, non mollis ex ipsum at risus.
        </p>
        <script src="index.js"></script>
    </body>
</html>
Tags:

2

Answers


  1. 0

    In HTML, container elements like <html> and <body> only stretch vertically far enough to wrap their contents. A background image is not considered as contents.

    If you want the body to fill to stretch to fill the window, you need to add something like height: 100% to your CSS for both html and body tags.

    Login or Signup to reply.
  2. 0

    Add this css rule:

    html, body {
  height: 100%;
  margin: 0;
}

    It will ensure that both the html as well as the body element (including its background-image when set to background-size: cover) span the whole height of the viewport/window (including a small area at the top and bottom which by default is left empty as a margin by browsers). Since percentage values are dependent on the parent element’s value, setting height: 100% for body alone isn’t enough – you also have to set it for html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search