Resizable background on website_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-04 01:59 出处：网络

Is it possible to resize the background image of a webpage as the 开发者_JAVA技巧browser window is resized?The following code shows how to make a cross browser background image:

Is it possible to resize the background image of a webpage as the 开发者_JAVA技巧browser window is resized?

The following code shows how to make a cross browser background image:

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Cross Browser Background</title>

    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      #content {
        z-index: 1; /* The content should be above the background image */

        margin: 20px 30px;
        background-color: #000;
        color: #FFF;
        padding: 10px 15px;

        /* Just add some fancy transparency */
        opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
        filter: alpha(opacity=50); /* IE lt 8 */
        -ms-filter: "alpha(opacity=50)"; /* IE 8 */
        -khtml-opacity: .50; /* Safari 1.x */
        -moz-opacity: .50; /* FF lt 1.5, Netscape */
      }
    </style>

    <!-- IE6 sucks as usual - Add some special code for it -->

    <!--[if IE 6]>
      <style type="text/css">
        html {
          overflow-y: hidden;
        }

        body {
          overflow-y: auto;
        }

        #background {
          position:absolute;
          z-index:-1;
        }

        #content {
          position:static;
        }
      </style>
    <![endif]-->
  </head>
  <body>
    <img id="background" src="background.jpg" alt="" />

    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam placerat justo, in tincidunt purus faucibus quis. Pellentesque facilisis mi id neque laoreet laoreet. Quisque quis metus vitae enim lacinia egestas eu at ipsum. Proin sed justo massa, non consequat lacus. Nullam pulvinar commodo egestas. Vivamus commodo ligula a turpis mattis facilisis. Vestibulum vel massa a lorem pulvinar varius nec ut justo. Donec hendrerit dapibus erat. Aenean interdum, lorem sit amet venenatis tincidunt, augue ipsum tincidunt velit, vel egestas nulla quam non quam. Mauris vulputate libero at purus auctor sed egestas magna vehicula.</p>
    </div>
  </body>
</html>

If you use CSS3 you have a new property called background-size that you can use like this to achieve your desired result:

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

Keep in mind that CSS3 is still not fully supported by all browsers (specially IE) and results may vary depending on which browser you view the page with. That said, hope it helps!

If you want something more browser friendly you could consider a javascript solution that will capture window resizes and stretch the image accordingly.

Yes, like this:

<img id="background" src="..." alt="Background Image" />

img#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
    height: 100%;
}