CSS3 background-size: обложка не делает обложку изображения вертикальной - PullRequest
Новая
       1

CSS3 background-size: обложка не делает обложку изображения вертикальной

6 голосов
/ 22 января 2012

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

Когда окно браузера короткое и широкое, я хочу, чтобы изображение расширялось, чтобы его верхняя часть заполняла весь экран по длине, а остальная его часть не была видна.

Когда окно браузера высокое и тонкое, я хочу, чтобы изображение расширилось так, чтобы левая часть заполняла весь экран по высоте, а остальная его часть не видна.

Использование CSS3 background-size: cover свойство заставляет первое работать как шарм, второе - нет. Вместо этого фоновое изображение сокращается, так что оно полностью видно в узкой доступной области и масштабируется до ширины, а затем на остальной части страницы ниже это просто цвет фона. 

body {
    background-color: #BF6F30;
    color: black;
    font-family: Georgia, "Times New Roman", sans-serif;
    background: url(' ... ');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Как я могу решить эту проблему?

Ответы [ 2 ]

10 голосов
/ 24 января 2012

Вас интересует только использование фонового изображения CSS? Это можно сделать, загрузив изображение и ограничив его CSS.

Будет ли работать любой из этих примеров?

HTML 

<body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">


</div>
</body>

CSS 

html {
        background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

body {
    background:#fff;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

html, body {
    height: 100%;
}

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Или этот? Этот загружает изображения из базы данных в массив и загружает их случайным образом, но вы можете почерпнуть некоторую информацию из этого:

Функция загрузки PHP 

<?php
    $bg_images = array(
        0 => 'comp1.png',
        1 => 'comp2.png',
        2 => 'comp3.png',
        ....
    );
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ];
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>";
?>

HTML 

...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...

CSS 

html, body {
    margin:0;
    height:100%;
}

img.source-image {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    min-width:1024px;
}

Эти параметры должны заполнять окно браузера в зависимости от высоты и ширины.

1 голос
/ 20 апреля 2015

body { background: url("...") no-repeat center center fixed; background-size: cover; }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...