Как разместить фоновое изображение на веб-странице с заголовком - PullRequest
Новая
       0

Как разместить фоновое изображение на веб-странице с заголовком

1 голос
/ 19 августа 2011

С чего мне начать: http://jsbin.com/opokev/39

Проблемы

  • изображение масштабируется и сжимается в соответствии с размером окна браузера. Например, если я открою firebug (который занимает половину страницы), фоновое изображение сжимается и выглядит не очень хорошо.

Требования

  • Я не хочу, чтобы изображение обрезалось снизу или вверх
  • Мне нужен верхний колонтитул размером примерно 85px
  • Мне не нужна горизонтальная или вертикальная полоса прокрутки на веб-странице.

Я задавал вопросы раньше, но получил смешанные ответы, я действительно борюсь с этим. Я пытаюсь получить что-то вроде фонового изображения на livingsocial.com , с той лишь разницей, что я не хочу, чтобы мой заголовок занимал часть изображения, как у них.

Ответы [ 2 ]

2 голосов
/ 19 августа 2011

Я вижу вашу проблему с фоновым изображением.Вы установили это как изображение в div.Почему бы не избавиться от этого, а просто применить следующее к CSS: 

body {
background-image: http://i53.tinypic.com/347a8uu.jpg;
background-repeat:none;

}

Или, если по какой-то причине вам нужно сохранить его как div, просто избавьтесь от position: absolute;

Для заголовка просто добавьте div сразу после <body примерно так: 

<div class="header_wrapper"></div>

И css: 

.header_wrapper {

width: 85px;
margin-left:auto;
margin-right:auto;
}
0 голосов
/ 19 августа 2011

Если это фон, то почему вы добавляете его как img?

CSS ... 

background:url("http://i53.tinypic.com/347a8uu.jpg" center top no-repeat;
background-size:cover;
...