Трудность вставки фонового изображения между верхним и нижним колонтитулом

Question

Трудность вставки фонового изображения между верхним и нижним колонтитулом

0

Таким образом, я настроил свой HTML, и я начал приступать к стилю соответственно, но я пытаюсь создать эффект заливки/покрытия, чтобы изображение находилось между верхним и нижним колонтитулом и покрывало экран, однако я получаю эту проблему. Я хочу, чтобы он охватывал всю страницу/экран.

Я уверен, что это легко исправить, я просто не могу понять это!

http://s28.postimg.org/he9h8lae3/screene.png

Вот мой код

HTML

'<body>

        <header id="page-header">
            <div class="container">
               <h1></h1>
                <h2></h2>
            </div>
         </header>

          <section class="page-main">
            <div class="container">
                <div class ="main">


             </div>
            </div>
          </section>

            <footer id="page-footer">
                <div class="container">
                 <h4></h4>
                <nav>
                    <ul>
                  <li><a href="feedback.html">Got Feedback?</a></li>
                </ul>
            </nav>
            </footer>
        </div><!-- #container -->
    </body>
</html>

CSS

body {
    color: #000;
    font-family: 'Rokkitt', serif;
    font-size: 1em;
    line-height: 1.2;
    width: 100%;
    height: 100%; }



#container {
    max-width: 1280px;
    margin: auto; }

main { display: block }


h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    line-height: 1;
    font-weight: bold; }

h2 {
    font-size: 1.2em;
    margin: 20px 0 20px 20px;
    text-align: center; }

h3 {  }


#page-header {
    background-color: #FFB90F;
    color: black;
    overflow: hidden; }

    #page-header h1 {
        color: black;
        margin: 20px 0 20px 20px;
        text-align: center; }


.page-main {
    background: url("../images/img_a.png") center center no-repeat;
    height: auto;
    background-size: cover;
    overflow: hidden;
    padding: 3%;
    box-shadow: inset 0 0 5px rgba(0,0,0,.75); }

#page-footer {
    background: #282828;
    color: white; }

    #page-footer nav { text-align: right; }

        #page-footer nav li {
            color: white;
            display: block; }

        #page-footer nav a {
            color: white;
            display: block;
            margin-right: 20px; }

hduncan 09 дек. 2013, в 23:36

Источник

1

Это зависит от вашего CSS, который вы не указали в своем вопросе.
Diodeus - James MacFarlane 09 дек. 2013, в 22:23
0

Было бы полезно, если бы вы добавили некоторые детали о том, что вы ищете в дополнение к добавлению CSS. Вы хотите сказать, что вы хотите, чтобы страница была полноэкранной, а нижний колонтитул был полностью внизу? Как насчет прокрутки?
sn3ll 09 дек. 2013, в 22:40
0

добавил CSS сейчас, извините за это.
hduncan 10 дек. 2013, в 00:00

Показать ещё 1 комментарий

Теги:

html

css

html5

css3

2 ответа

Ещё вопросы

Это зависит от вашего CSS, который вы не указали в своем вопросе.
Было бы полезно, если бы вы добавили некоторые детали о том, что вы ищете в дополнение к добавлению CSS. Вы хотите сказать, что вы хотите, чтобы страница была полноэкранной, а нижний колонтитул был полностью внизу? Как насчет прокрутки?
добавил CSS сейчас, извините за это.

Paul Redmond · Answer 1 · 2013-12-09T20-53-00.000Z

Если вы хотите покрыть пространство, вы можете посмотреть в размере фона CSS3.

element{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ani · Answer 2 · 2013-12-09T20-58-00.000Z

CSS

Я предполагаю, что фоновое изображение прикреплено к div.container

.container{
     background-image: url('Whateveryoururlis');
     height: HeightofImage;
     width: widthofImage;
 }

Height и width важны.