发表新帖
发表新帖

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

后端 未结
关注
22 2194
迷失自我
迷失自我 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 02:07

    Use this CSS:

    background-size: 100% 100%

    0 讨论(0)
  • 闹比i
    2020-11-22 02:08

    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%;
    0 讨论(0)
  • 孤独总比滥情好
    2020-11-22 02:08

    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;
}
    0 讨论(0)
  • 半阙折子戏
    2020-11-22 02:08

    I use this, and it works with all browsers:

    <html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* 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;}
        </style>
        <!-- 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. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>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.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题