Stretch and scale a CSS image in the background - with CSS only

Question

I want that my background image stretch and scale depending on the browser viewport size   I ve seen some questions on Stack nbsp Overflow that do the job  like Stretch and scale CSS background for example  It works well  but I want to place the image using background  not with an img tag   In that one an img tag is placed  and then with CSS we tribute to the img tag   width 100   height 100     It works  but that question is a bit old  and states that in CSS 3 resizing a background image will work pretty well  I ve tried this example the first one  but it didn t work out for me   Is there a good method to do it with the background-image declaration

User · Answer

I agree with the image in absolute div with 100% width and height. Make sure you set 100% width and height for the body in the CSS and set margins and padding to zero. Another issue you will find with this method is that when selecting text, the selection area can sometimes encompass the background image, which has the unfortunate effect of making the full page have the selected state. You can get round this by using the user-select:none CSS rule, like so:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Again, Internet Explorer is the bad guy here, because it doesn't recognise the user-select option - not even Internet Explorer 10 preview supports it, so you have the option of either using JavaScript to prevent background image selection (for example, http://www.felgall.com/jstip35.htm ) or using CSS 3 background-stretch method.

Also, for SEO I would put the background image at the bottom of the page, but if the background image takes too long to load (that is, with a white background initially), you could move to the top of the page.

User · Answer

I used a combination of the background-X CSS properties to achieve the ideal scaling background image   background-size  cover  background-repeat  no-repeat  background-position  center  background-attachment  fixed    This makes the background always cover the entire browser window and remains centered when scaling

User · Answer

The following worked for me    back-ground      background-image  url     assets background png       background-size  100vw 100vh      that worked to cover the entire background on different dimensions

User · Answer

I wanted to center and scale a background image  without stretching it to the entire page  and I wanted the aspect ratio to be maintained  This worked for me  thanks to the variations suggested in other answers    INLINE IMAGE  ------------------------   lt div id  background  gt       lt img src  img jpg  class  stretch  alt      gt   lt  div gt    CSS ----------------------------------  html       height 100       background       text-align  center      width  100        height  100        position  fixed      left  0px       top  0px       z-index  -1      stretch       margin  auto      height 100

User · Answer

Using the code I mentioned     HTML   lt div id  background  gt       lt img src  img jpg  class  stretch  alt      gt   lt  div gt    CSS   background       width  100        height  100        position  fixed       left  0px       top  0px       z-index  -1     Ensure div tag stays behind content  -999 might work  too         stretch       width 100       height 100       That produces the desired effect  only the content will scroll  not the background   The background image resizes to the browser viewport for any screen size  When the content doesn t fit the browser viewport  and the user needs to scroll the page  the background image remains fixed in the viewport while the content scrolls   With CSS 3 it seems this would be a lot easier

User · Answer

You could use the CSS3 property to do it quite nicely  It resizes to ratio so no image distortion  although it does upscale small images   Just note  it s not implemented in all browsers yet   background-size  100

User · Answer

Use this CSS   background  url  img png   no-repeat   background-size  100

User · Answer

You can actually achieve the same effect as a background image with the img tag  You just have to set its z-index lower than everything else  set position absolute and use a transparent background for every box in the foreground

User · Answer

You can use the border-image   yourimage property to scale the image up to the border  Even if you give the background-image  the border image will be drawn over it   The border-image property is very useful if your style sheet is implemented somewhere which doesn t support CSS nbsp 3  If you are using Google Chrome or Firefox  then I recommend the background-size cover property itself

User · Answer

If you want to have the content centered horizontally  use a combination like this   background-repeat  no-repeat  background-size  cover  background-position  center    This will look beautiful

User · Answer

background-size  100  100      stretches the background to fill the entire element on both axes

User · Answer

It is explained by CSS tricks  Perfect Full Page Background Image  Demo  https   css-tricks com examples FullPageBackgroundImage progressive php  Code   body     background  url images myBackground jpg  no-repeat center center fixed    -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover

User · Answer

Thanks   But then it was not working for the Google Chrome and Safari browsers  stretching worked  but the hight of the pictures was only 2 nbsp mm    until someone told me what lacks      Try to set height auto min-height 100     So change that for your height 100   line  gives         background       width  100        height  100        position  fixed       left  0px       top  0px       z-index  -1      stretch       width 100       height auto      min-height 100       Just before that newly added code I have this in my Drupal Tendu themes style css      html  body height 100          page background  ffffff  height auto  important height 100  min-height 100  position relative     Then I have to make a new block within Drupal with the picture while adding class stretch       lt  img alt    class  stretch  src  pic url       Just copying a picture with the editor in that Drupal block doesn t work  one has to change the editor to non-formatted text

User · Answer

Use the Backstretch plugin  One could even have several images slide  It also works within containers  This way for example one could have only a portion of the background been covered with an background image   Since even I could get it to work proves it to be an easy to use plugin

User · Answer

CSS   html body       background  url images bg jpg  no-repeat center center fixed      -webkit-background-size  cover     For WebKit       -moz-background-size  cover        Mozilla       -o-background-size  cover          Opera       background-size  cover             Generic

User · Answer

You can add this class into your CSS file    stretch       background  url images bg jpg  no-repeat center center fixed      -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover      It works in    Safari 3 or later Chrome Whatever or later Internet nbsp Explorer 9 or later Opera 10 or later  Opera 9 5 supported background-size  but not the keywords  Firefox 3 6 or later  Firefox 4 supports non-vendor prefixed version

User · Answer

Do you want to achieve this just using one image  Because you can actually make somewhat similar to a stretching background using two images  PNG images for instance   I ve done this before  and it s not that hard  Besides  I think stretching would just harm the quality of the background  And if you add a huge image it would slow down slow computers and browsers

User · Answer

In order to scale your images appropriately based on the container size  use the following   background-size  contain  background-repeat  no-repeat

User · Answer

I use this  and it works with all browsers    lt html gt       lt head gt           lt title gt Stretched Background Image lt  title gt           lt style type  text css  gt                 Remove margins from the  html  and  body  tags  and ensure the page takes up full screen height                 html  body  height 100   margin 0  padding 0                   Set the position and dimensions of the background image                  page-background  position fixed  top 0  left 0  width 100   height 100                    Specify the position and layering for the content that needs to appear in front of the background image  Must have a higher z-index value than the background image  Also add some padding to compensate for removing the margin from the  html  and  body  tags                  content  position relative  z-index 1  padding 10px            lt  style gt           lt  -- The above code doesn t work in Internet Explorer 6  To address this  we use a conditional comment to specify an alternative style sheet for IE 6  -- gt           lt  -- if IE 6  gt           lt style type  text css  gt              html  overflow-y hidden               body  overflow-y auto                page-background  position absolute  z-index -1                content  position static padding 10px            lt  style gt           lt   endif -- gt       lt  head gt       lt body gt           lt div id  page-background  gt  lt img src  http   www quackit com pix milford sound milford sound jpg  width  100   height  100   alt  Smile  gt  lt  div gt           lt div id  content  gt               lt h2 gt Stretch that Background Image  lt  h2 gt               lt p gt This text appears in front of the background image  This is because we ve used CSS to layer the content in front of the background image  The background image will stretch to fit your browser window  You can see the image grow and shrink as you resize your browser  lt  p gt               lt p gt Go on  try it - resize your browser  lt  p gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

Use this CSS   background-size  100  100

User · Answer

The following CSS part should stretch the image with all browsers   I do this dynamically for each page  Therefore I use PHP to generate its own HTML tag for each page  All the pictures are in the  image  folder and end with  Bg jpg     lt html style         background  url images    pic  Bg jpg  no-repeat center center fixed        -webkit-background-size  cover        -moz-background-size  cover        -o-background-size  cover        background-size  cover        filter  progid DXImageTransform Microsoft AlphaImageLoader src   images    pic  Bg jpg        sizingMethod   scale           -ms-filter    progid DXImageTransform Microsoft AlphaImageLoader src   images    pic  Bg jpg    sizingMethod   scale        gt    If you have only one background picture for all pages then you may remove the  pic variable  remove escaping back-slashes  adjust paths and place this code in your CSS file   html      background  url images homeBg jpg  no-repeat center center fixed      -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover      filter  progid DXImageTransform Microsoft AlphaImageLoader src  images homeBg jpg       sizingMethod  scale        -ms-filter  progid DXImageTransform Microsoft AlphaImageLoader src  images homeBg   sizingMethod  scale        This was tested with Internet nbsp Explorer nbsp 9  Chrome 21  and Firefox 14

User · Answer

CSS3 has a nice little attribute called background-size cover   This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio  The entire area will be covered  However  part of the image may not be visible if the width height of the resized image is too great

[css] Stretch and scale a CSS image in the background - with CSS only

Examples related to css

Examples related to background