Skip to content Skip to sidebar Skip to footer
Home / Css / Html

HTML Image Going Across Entire Screen

Post a Comment
So I have this div element
Copy

These properties make it easier to read text without any formatting as the text isn't touching the sides of the browser window, the same as a book

What has the default properties to do with the problem of the image not sticking to the footer

Because of the "margin: 8px;" attached to the body, all elements inside the body will have a gap of 8px between them and the edge of the browser window. While this gap is created by design by the draft of html, it will become problematic because it prevents puttings things against the side of the browser window.

How can this problem be solved

This problem can be solved by 1 of the following solutions:

Removing the margin on the body element

By using the following css code

body { margin: 0; }

You can remove the margin from the html, allowing you webapp to touch sides of the screen. however, this has its drawbacks, namely:

  • You need add margins/paddings to your design to prevent it from touching the sides where it decreases readability

body { margin: 0px; }

p {
  margin-top: 8px;
  margin-left: 8px;
}

#image {
  background-color: black;
  height: 100px;
}
<body>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <div id=image></div>
</body>

Use absolute/fixed positioning on the image

By using absolute/fixed positioning on you image, you can force the place where the image is rendered to the correct cordinates. This can be done by doing:

#image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

This has its advantages that you have a footer that is always at the bottom of the page, no matter how large your browser is. This also comes with its own disadvantages, these include:

  • If the text above the image is to large, it will flow under the picture before creating a scroll bar, these can be countered by adding "margin-bottom: 100px;" to your body element so the text will leave a bigger cap at the bottom of the page

#image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}


#image {
  height: 100px;
  background-color: black;
}
<body>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <div id=image></div>
    </body>

Solution 2:

You can try like this:-

<div id="foot-er" style="background:url(001.png); height: 190px; width: 1349px; border: 1px solid black; line-height:1.7em;background-size:100% 190px"></div>

background-size:100% 190px

100% is width and 190px is image height and this will stretch your images.


You may like these posts

Post a Comment for "HTML Image Going Across Entire Screen"