发表新帖
发表新帖

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

后端 未结
关注
22 2195
迷失自我
迷失自我 2020-11-22 01:37

I want that my background image stretch and scale depending on the browser viewport size.

I\'ve seen some questions on Stack Overflow that do the job, like

相关标签:
22条回答
  • 情书的邮戳
    2020-11-22 01:48

    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'.

    <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\')\
";>

    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 Explorer 9, Chrome 21, and Firefox 14.

    0 讨论(0)
  • 不知归路
    2020-11-22 01:48

    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 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:

    < 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.

    0 讨论(0)
  • 借酒劲吻你
    2020-11-22 01:49

    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.

    0 讨论(0)
  • 小蘑菇
    2020-11-22 01:50

    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 :).

    0 讨论(0)
  • 花落未央
    2020-11-22 01:51

    Use this CSS:

    background: url('img.png') no-repeat; 
background-size: 100%;
    0 讨论(0)
  • 借酒劲吻你
    2020-11-22 01:51

    In order to scale your images appropriately based on the container size, use the following:

    background-size: contain;
background-repeat: no-repeat;
    0 讨论(0)
 看不清?
提交回复
热议问题