Особенности background-size: cover

WalkWeb · December 13, 2017

Необходимо указывать background: url из текста самой страницы, а также добавить свойство background-size: cover

И вот что заметил - если background-size: cover поместить в стили, то он не работает, а если также на самой странице - то работает:

<html>
<head>
    <title>Background Size</title>
    <style>
        .true {
            width: 300px;
            height: 200px;
            border: 1px solid #888;
        }

        .false {
            width: 300px;
            height: 200px;
            border: 1px solid #888;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="true" style="background: url(https://5pillarsuk.com/wp-content/uploads/2016/08/google.png) no-repeat center; background-size: cover;"></div>
<div class="false" style="background: url(https://5pillarsuk.com/wp-content/uploads/2016/08/google.png) no-repeat center;"></div>
</body>
</html>

Но мне, разумеется, хотелось бы, чтобы css в html было меньше. Есть ли способы это сделать? (убрать background-size: cover в стили, но чтобы они работали).

Edited December 13, 2017 by WalkWeb

SelenIT · December 13, 2017

У вас в атрибуте style стоит сокращенное свойство background, которое включает в себя background-size и, соответственно, перебивает его (на дефолтное значение auto в данном случае, т.к. не указано иное). Указывайте там только background-image, а всё остальное (включая background-size) перенесите в стили, и всё будет ОК.

WalkWeb · December 14, 2017

Спасибо)

Sign In

Особенности background-size: cover

Question

WalkWeb

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

WalkWeb

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information