Ничего не отображается при размещении фонового изображения в элементе

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

Используя bootstrap, я пытаюсь установить фоновое изображение для первой строки html-страницы. CSS-класс .background содержит информацию о настройке фонового изображения. Когда я делаю его классом <body> , он работает нормально и заполняет всю страницу фоновым изображением. Однако, когда я пытаюсь поместить его в первое <div> , изображение вообще не отображается.

Насколько я понимаю, вы можете установить фоновое изображение для <div> . Что я делаю неправильно, из-за чего это не работает?

CSS:

 .background 
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}

HTML:

 <body>
<div class ="row background">
  <div class="col-xs-12">
  <h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
  <input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>

<!-- start new row -->
<div class="row">
  <div class="col-xs-3">
    <!-- img> /img -->
  </div>
  <div class="col-xs-9">
    <p>
     Blob
    </p>
  </div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
  $("#down").fadeIn(6000);
}, 6000);
</script>
</body>

Кроме того, вот попытка поместить его в JSFiddle: https://jsfiddle.net/yc1jnp6o/2 /. По какой-то причине ни изображение (которое я изменил для скрипки), ни заголовок не будут отображаться в скрипке. На сервере apache, который я настроил, это не так.

1. Что это: <img> /img> ?

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

3. Чтобы заставить ваш jsfiddle работать, вам нужно добавить все ваши ресурсы css и js в качестве внешних ресурсов из левого бокового меню.

4. display установлено значение none для вашего #text элемента, поэтому оно изначально не отображается. Сценарий, который вы используете для его отображения, требует jquery, но вы не включаете его в свою скрипку. Здесь исправленная скрипка , как вы можете видеть, фон виден, как только отображается текст.

Ответ №1:

Не используйте ширину, потому что он использовал col-xs-12 в строке, это означает, что он хочет 100% ширины

 .background {
   background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
   background-repeat : no-repeat;
   background-size : cover;
   min-height:200px;
}

Ответ №2:

При использовании фона необходимо указать ширину и высоту:

 .background {
  background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 200px;
}

Ответ №3:

Возможно, вы можете использовать псевдокод

 .row.background:before{
  display:block;
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
  background-repeat : no-repeat;
  background-size : cover;
  z-index:-1;
}

он охватывает весь класс строк

Проверьте скрипку