Горизонтальный сайт с использованием Flex Box и div с фоновым изображением - PullRequest
Новая
       2

Горизонтальный сайт с использованием Flex Box и div с фоновым изображением

0 голосов
/ 05 июня 2011

Я пытаюсь создать демонстрацию для горизонтального сайта, используя Flex Box, состоящий из изображений в качестве заполнителей. Я пытаюсь использовать div с фоновыми изображениями. Я бы хотел, чтобы элементы div автоматически масштабировали по размеру окна, но соответствовали ширине фонового изображения. 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>CSS 3 horizontal site demo</title>
  <style type="text/css">
    .main {
      display: box;
      display: -moz-box;
      display: -webkit-box;
    }
    .panels {
      background-repeat:no-repeat;
      background-position:center top;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;    }
    #panel-1 {
      background-image: url(scen1.png);
    }
    #panel-2 {
      background-image: url(scene2.png);
    }
    #panel-3 {
      background-image: url(scene3.png);
    }
  </style>
</head>
<body>
<div class="main">
<div id="panel-1" class="panels"><h1>First Panel</h1></div>
<div id="panel-2" class="panels"><h1>Second Panel</h1></div>
<div id="panel-3" class="panels"><h1>Third Panel</h1></div>
</div>
</body>
</html>

Вместо этого изображения заполняются до размера содержимого. У любого гуру CSS3 есть решение?

Спасибо!

1 Ответ

0 голосов
/ 05 июня 2011

Расположите его абсолютно и укажите верх и низ: 

 .main {
      display: box;
      display: -moz-box;
      display: -webkit-box;
      position: absolute;
      top: 0;
      bottom: 0;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...