Css: Stretching Background Image to 100% Width and Height of Screen

CSS: stretching background image to 100% width and height of screen?

You need to set the height of html to 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

100% width background image with an 'auto' height

Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.

Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.

Edit: Changing the image on different size of the window

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){           
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="Sample Image"/>
</div>

Stretch a background image (SVG) to 100% width and 100% height?

Using background-size: 100%; actually means background-size: 100% auto;. Use both width and height values: background-size: 100% 100%;

Using a width value only, in which case the height defaults to auto.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax

.container {

   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");

   background-position:center center;

   background-repeat:no-repeat;

   width:300px;

   height:180px;

   background-color:#eef;

   border-bottom:1px solid #000;

}

#container1 {

  background-size:contain;

}

#container2 {

  background-size:cover;

}

#container3 {

  background-size: 100% 100%;

}

<div id="container1" class="container"></div>

<div id="container2" class="container"></div>

<div id="container3" class="container"></div>

Background image: height stretch 100% of window, width repeat

just created a jsfiddle for your purposes:

http://jsfiddle.net/aT6J6/

try to play with, maybe that fits your requirements.

element
{
    background-size: 100%;
}

for you example:

<div>
    <div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;background:url('http://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg') repeat-x scroll 0 0 / 100% auto rgba(0, 0, 0, 0)"> 
    </div>
</div>

updated fiddle:

http://jsfiddle.net/aT6J6/1/

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" />

CSS: Stretching image to 100% width

Use background-size like the one used below,

body {
  background-image: url(money.jpg) no-repeat;
  background-size: 100%;
}  

Some useful links :

• Scale background image style
• Stretch and Scale a CSS image Background - With CSS only

Stretch background image to full width of the window even if the image dimensions are less than the page?

Try

background-size: 100%

or

background-size: cover

Here is a common implementation.

html, body {

  height: 100%;

  margin: 0px;

  padding: 0px;

}

body {

  background-image: url('http://placehold.it/150x150');

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}

CSS stretch or fit background image

EDIT:

You tried background-size: 100%,

CSS interprets this as 100% width, automatic height which will look like this:

background-size: 100% auto;

What you want is the second argument (height) to be 100% too, so you should do this:

background-size: 100% 100%;

END EDIT

Try:

background-size: cover;

This will fit the width or height and overflow the rest

Or:

background-size: contain;

This will make the image as large as possible without changing it's aspect ratio.

You can read more about the css3 background-size property HERE

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

---

Related Topics