Изменяемый фон на сайте - PullRequest
Новая
       11

Изменяемый фон на сайте

1 голос
/ 18 июня 2010

Можно ли изменить размер фонового изображения веб-страницы при изменении размера окна браузера?

Ответы [ 3 ]

2 голосов
/ 18 июня 2010

Следующий код показывает, как создать кросс-браузерное фоновое изображение: 

<?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>
2 голосов
/ 18 июня 2010

Если вы используете CSS3 , у вас есть новое свойство под названием background-size, которое вы можете использовать для достижения желаемого результата: 

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

Имейте в виду, что CSS3 все ещене полностью поддерживается всеми браузерами (особенно IE), и результаты могут отличаться в зависимости от того, с каким браузером вы просматриваете страницу.Тем не менее, надеюсь, что это поможет!

Если вы хотите что-то более дружественное к браузеру, вы можете рассмотреть javascript-решение, которое будет захватывать изменения размера окна и соответственно растягивать изображение.

1 голос
/ 18 июня 2010

Да, вот так: 

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

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