Не удается получить жидкое фоновое изображение в css body для работы

Я пытаюсь использовать фоновое изображение для моего пока полностью гибкого веб-дизайна, и нашел здесь много решений, но теперь я в замешательстве! Что-то в моем CSS мешает отображению моего фонового изображения. Я использую многоколоночные жидкостные макеты Мэтью Джеймса Тейлора, и всякий раз, когда я пытаюсь добавить какую-то новую функциональность, все идет наперекосяк. Я новичок в веб-дизайне и буду очень признателен за вашу помощь. Вот мой HTML5 (надеюсь, действительный):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Blablablah</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Blablablah" />
<meta name="keywords" content="Blablablah" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="Blablafoo.css" media="screen" />
</head>

<body onload="parent.resizeIframe(document.body.scrollHeight)">

  <div class="colmask fullpage">
<div class="col1">
<h2>BLAAAAAAAAA BLAAAAAAAAA BLAAAAAAAAA</h2>
    </div>
  </div>

</body>
</html>

И вот мой CSS:

body {
    background-image:url(‘background.JPG’) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
.colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
}
.col1 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
.fullpage {
    min-height:592px;
}
.fullpage .col1 {
    width:96%;
    left:2%;
}
img {
    max-width:100%;
}

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

Источник

2 ответа

Решение

Это вполне нормально, чтобы установить фон для элемента тела, но вы использовали background-image определение списка опций, которые не действительны для background-image, То, что вы указали, является действительным значением для background опция быстрого доступа, поэтому оба следующих варианта будут работать:

1:

body {
    background: url('background.JPG') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}

2:

body {
    background-image: url('background.JPG');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}

Кроме того, кавычки вокруг вашего пути кажутся некими стилизованными кавычками, которые не будут работать в CSS. Используйте простые кавычки, такие как "или".

Источник

Попробуйте установить с помощью html элемент.

   html { 
      background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Посмотреть демо здесь

Обновлено:

Другой метод будет использовать jQuery, (будет отлично работать в IE7 +)

$(function () {

    var theWindow = $(window),
        $bg = $("#bg"),
        aspectRatio = $bg.width() / $bg.height();

    function resizeBg() {

        if ((theWindow.width() / theWindow.height()) < aspectRatio) {
            $bg.removeClass()
                .addClass('bgheight');
        } else {
            $bg.removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(function () {
        resizeBg();
    }).trigger("resize");

});

Тогда используйте img установить фоновое изображение так:

<img src="http://3rdbillion.net/wp-content/uploads/2013/11/1b7a9c8a2df4bd4a25597f1ca0cb89f52.jpg" id="bg" alt="" />

Вы можете увидеть демо здесь

Источник
Другие вопросы по тегам