фона Размер обложки не работает

HTML:фона Размер обложки не работает

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
    <header> 
     <h1>California Road Trip</h1> 
     <h2>Driving the Coast of California</h2> 
    </header> 

    <p> 
     Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i> 
     <br /> 
     <b>Call for help now!</b> 
    </p> 

    <p> 
     <video controls="controls" autoplay height="300" width="500" loop> 
      <source src="20160628_110323_64628293200884.mp4" type="video/mp4" /> 
     </video> 
    </p> 

    <div> 
     <img src="columbus-nav-850x637.jpg" alt="Background Image" /> 
    </div> 

    <footer> 
     Copyright &copy; 2016. 
    </footer> 
</body> 
</html>

CSS:

header{ 
    color: #000; 
    text-align: center; 
    border: 500px; 
    background-color: rgba(255, 190, 0, .5); 
    border-radius: 20px; 
} 

p{ 
    text-align: left; 
    margin-left: 20px; 
    font-family: sans-serif, Arial, 'Myriad Pro'; 
} 

div{ 
    position: fixed; 
    top: 20px; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
} 

footer{ 
    position: fixed; 
    bottom: 10px; 
    margin-left: 10px; 
}

Фоновое изображение не занимают весь экран. Любая помощь приветствуется.

Вот JSfiddle

источник

2016-07-06 GTown-Coder

Вы должны установить Div IMG, а не только дел. Дайте элементу высоту и ширину 100%, и она должна покрыть область просмотра.

div img { 
    position: fixed; 
    top: 20px; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
    height: 100%; 
    width: 100% 
}

источник

2016-07-06 18:42:57 gwar9

ahh, который сработал! Спасибо! –

Добавьте эти свойства Дива раздел в CSS файл {

-moz-фон-размер: крышка;

-o-background-size: покрытие;

-webkit-background-size: покрытие;

}

источник

2016-07-06 18:39:35

Извините, но это не сработало –

Фоновое изображение является собственностью css, но вы пытаетесь применить его к тегу изображения. Вы хотите сделать что-то вроде этого:

HTML:

<div class="myBackground"></div>

CSS:

.myBackground{ 
    background-image: url(columbus-nav-850x637.jpg); 
    background-size: cover; 
    /*You can make this background fixed on desktop by adding this:*/ 
    background-attachment: fixed; 
}

источник

2016-07-06 18:45:37 will

Я знаю, что я могу настроить фоновое изображение с помощью CSS напрямую, но я также могу сделать это так, как я показал с помощью 'z-index = -1' ..который отправляет это изображение на задний план –

Это работает, но тогда ваше изображение будет растягиваться, если соотношение сторон не поддерживается. Вы также столкнетесь с проблемами в Firefox, если применить их к нескольким изображениям на одной странице. – will

Изображение, которое вы хотите, чтобы служить в качестве фона для вашей страницы помещается в DIV меньше размер вашей страницы. И, следовательно, даже если изображение заполнило div, оно не заполнит страницу.

Одним из возможных решений является применение фонового изображения непосредственно на теле, как предлагает Ричард.

Однако, если вы хотите, чтобы ваше изображение находилось в отдельном div, вам сначала нужно сделать обложку div всей вашей страницей. Незначительное обновление свойств CSS должно сделать это.

div{ 
    position: fixed; 
    top: 20px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: -1; 
    opacity: .5; 
    background-size: cover; 
}

Следующее, что вам нужно, чтобы изображение покрыло весь div. Вы можете сделать это, установив

width: 100%; 
height: 100%;

на IMG тега, или удаление IMG тега вообще и добавление

background-image: url("columbus-nav-850x637.jpg");

в CSS для самих дел. Вам также может потребоваться установить правильный z-индекс в вашем «фоновом» div, чтобы сложить его за другим содержимым страницы.

источник

2016-07-06 19:00:46 elem4th

фона Размер обложки не работает

ответ

Смежные вопросы