How to Stretch a Background Image to Cover The Entire HTML Element

How do I stretch a background image to cover the entire HTML element?

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

How to stretch the background image to fill a div

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

background image doesn't stretch full page width

My guess is that this is because
'width: 100%' means the width of the
browser window, rather than the entire
width of the page, is there a way to
fix this?

100% means it'll be as wide as the parent element it is positioned relative to (in this case, body, the width of which will be based on the width of its parent, html). Which will be as wide as the browser window, unless you specify otherwise.

The problem is, you have another child of body which can be wider than body: both #container and #footer are styled such that they will always be at least 1026px wide. This does not widen their parent elements, as we've already established that those will be as wide as the browser window; instead, they overflow their parents. The default response to this is to display scrollbars so that you can scroll and view the overflowing content; if you added the style overflow:hidden to html or body, you'd find your content and footer clipped to the size of the browser window, and no scrollbars displayed.

There are a couple of easy solutions to this:

1. Wrap #content and #footer in #upbg instead of preceding them with it. Then remove the existing styles, and style it as follows: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; This accomplishes two things: you're no longer specifying a width for #upbg, thus allowing it to become wide enough to enclose its new children, and it allows you to get rid of a lot of now-unnecessary styling (you'll want to clear out the padding you've set for body as well, along with some style on #content). Alternately,
2. Get rid of the minimum width on #content and #footer, so they don't overflow.

background-image stretch to fit beyond viewport

Remove height: 100%; from html and it will extend. And if you need min-height: 100% on body, you can use min-height: 100vh instead, and that will not rely on height: 100% on html

html { box-sizing: border-box; }body {  overflow-y: scroll;  padding-bottom: 30px;  padding-top: 70px;  background-color: #363636;  min-height: 100vh; background-color: #1976D2; background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% ); background-repeat: no-repeat; background-attachment: scroll; background-position: right 70px; background-size: cover;  margin: 0;  box-sizing: border-box;}div.something { height: 3000px; width: 10px; }header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header><div class="something"></div>

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

---

Related Topics