Рендеринг фонового изображения для DIV в BODY

Question

Рендеринг фонового изображения для DIV в BODY

0

У меня есть следующие стили для моей страницы:

    <style>
        html, body {
            margin: 0;
            padding: 0
        }
        body {
            background-color: rgb(5, 77, 179);
            text-align: center
        }   
        .contentarea {
            background-image: url('path-to-this-image.png')
        }
        .class {
            background-image: url('path-to-another-image.png')
        }

    </style>

В теле есть два тега DIV:

<body>
    <div class="contentarea">
    </div>
    <div class="class">
    </div>
</body>

Когда я пытаюсь загрузить страницу, появляется только синий фон. Почему это? Я использую Chrome> v.25.

user1505713 30 нояб. 2013, в 21:14

Источник

Теги:

html

css

2 ответа

0

Добавляем к предыдущему: чтобы он работал со 100% установленным свойством элемента как "display: block;". Он должен работать. Итак, ваш css может выглядеть так:

 body{
    background-color: rgb(5, 77, 179);
    text-align: center
  }
 .contentarea {
    background-image: url('path-to-this-image.png');
    width:100%; /*or whatever*/
    min-height:80%;   /*or whatever*/ 
    display:block;
  }
  .class {
      background-image: url('path-to-another-image.png');
      width:100%; /*or whatever*/
      min-height:80%;   /*or whatever*/ 
      display:block;
  }

Anubhab 30 нояб. 2013, в 18:57

Ещё вопросы

Ani · Accepted Answer · 2013-11-30T18-11-00.000Z

CSS:

    .contentarea {
        background-image: url('path-to-this-image.png');
        height: Height of image in px; // or 100%
    }
    .class {
        background-image: url('path-to-another-image.png');
        height: Height of image in px; // or100%
    }

Если у вас нет текста внутри div, вам нужно дать высоту. Кроме того, не забудьте добавить точку с запятой ; в конце свойства css

Работает с px, но я могу также использовать проценты? Пробовал "100%", но ничего не обнаружилось.
Ты можешь. Но вам придется изменить стиль ... Я не уверен, что у вас есть в вашем CSS .. Если вы создадите скрипку, я могу показать вам.
Пожалуйста, примите ответ, если это сработало