Центрирование CSS фонового изображения - PullRequest
Новая
       0

Центрирование CSS фонового изображения

1 голос
/ 09 июля 2011

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

Я помню сначала, у меня это было как настоящий CSS background-img

тогда у меня было 

<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>

со стилем mainbackground 

#mainBackgrond {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

Теперь у меня есть 

<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">

со стилем 

#mainBackgrond {
    height: 50em;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

потому что это, по крайней мере, выглядит хорошо на моем домашнем ноутбуке.

Да, я знаю, что написала "mainBackgrond" неправильно ... потерпите меня здесь!

Ответы [ 4 ]

1 голос
/ 09 июля 2011

Я не думаю, что вы можете, если вы не хотите использовать HTML 5.

См .: css масштабированное фоновое изображение , если это приемлемо для вас.

Редактировать: К вашему сведению, при использовании «Высота: 100%» растягивается до 100% содержимого высоты, а не окна.

1 голос
/ 09 июля 2011

Возможно, вы захотите взглянуть на это (или другие подобные плагины jquery)

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Довольно прост в использовании и полностью растягивает фоновое изображение, не рискуя соотношением сторон.

1 голос
/ 09 июля 2011

Если проблема в том, что изображение не растягивается до нижней части окна (это то, что я вижу в Chrome), то измените height: 50em в вашем стиле #mainBackgrond на:

height: 100%;

0 голосов
/ 09 июля 2011

Попробуйте удалить свойство height, чтобы оно сохраняло соотношение сторон и растягивалось по всему экрану, если это является целью. 

#mainBackgrond {
  position: fixed;
  z-index: -1;
  width: 100%;
  left: 0px;
  top: 0px;
  background: url(/background_image.JPG) no-repeat center center fixed;
}

Фоновое изображение само по себе огромно, иделает начальное время загрузки очень медленным, вам следует подумать о том, чтобы сжать его больше или изменить его размер.

также обратите внимание на css media query хороший способ показать фоновые изображения разного размера для посетителей с меньшими экранамиэто может даже не иметь разрешения, чтобы увидеть фон. 

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...