Задать вопрос
@ChrisMenschenin
Возвысь низкое и унизь высокое.
css

Почему фон не масштабируется?

Здравствуйте.
Не могу масштабировать фон слоя с идентификатором #back.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="content-type" content='text/html;charset="UTF-8"'>   
    <meta name="author" content="ChrisM">    
    <meta name="copyright" content=""........." ChrisM">   
    <meta name="discription" content="..........">
    <meta name="keywords" content=".......................">

<!--|.......OTHER NAME........|-->

    <title></title>
    <style type="text/css"><!--
 
     body, html, #parallax {
    overflow-x: hidden;
    overflow-y: auto;}
  
     #parallax {
    perspective: 1px;
    height: 100vh;}
  
     #layer-back {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;}
    
     #back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-size: cover;
    background: url(mainSpidey.jpg) no-repeat 100% 0;
    transform: translateZ(-1px) scale(2);}
  
     #layer-base {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    background: url(back1.jpg) repeat-y 50% 0;}

    --></style>

<!--|........PREFIXFREE........|-->

    <script src="Prefixfree/prefixfree.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--|........OHNEMULL........|-->
    
    <link rel="stylesheet" type="text/css" href="ohnemull.css">
</head>
<body>
    <div id="parallax">
        <div id="layer-back">
            <div id="back"></div>
        </div>  
        <div id="layer-base">
   
        </div>
    </div>
</body>
</html>

ЧТо не так?
Спасибо.
  • Вопрос задан
  • 200 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 3
twobomb
@twobomb
Все отлично масштабируется.
Ответ написан
Комментировать
Комментировать
evgeniy8705
@evgeniy8705
Повелитель вселенной 
#back {   
    background: url(http://www.theactionpixel.com/wp-content/uploads/2015/06/spidermanMilemorales.jpg) no-repeat 100% 0;
    background-size: cover;    
    bottom: 0; 
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(-1px) scale(2);
}
Ответ написан
2 комментария
2 комментария
delphinpro
@delphinpro Куратор тега CSS
frontend developer 
#back {
  background-size: cover;
  background: url(mainSpidey.jpg) no-repeat 100% 0;
}

Проблема в порядке свойств.
background - это короткий вариант записи множества свойств для задания фона:
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-color

И это свойство перезаписывает все параметры фона.

Как-то так выглядит полная запись вашего случая
#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0 / cover;
}


Или просто поменяйте местами строчки
#back {
  background: url(mainSpidey.jpg) no-repeat 100% 0;
  background-size: cover;
}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Доделать сайт на Revolution 3
22 нояб. 2024, в 21:44
50000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Ещё заказы