Окно просмотра фонового изображения по центру?

Question

Я никогда не имел дело с таким веб-сайтом, но вот что я пытаюсь сделать ...

У меня есть одно большое изображение (1000px x 1000px), которое я хочу использовать дляизображение на заднем плане.Сам контент занимает всего около 500px x 500px, и он должен постоянно находиться на одной и той же позиции относительно фонового изображения.

Это сложно описать, поэтому я сделаю картинку:

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

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

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

Answer 1

используйте CSS:

HTML{ width:100%; height:100%; 
      background:#F00 url(path/to/your/image.jpg) center center no-repeat;
      background-attachment: fixed;
      background-size:100% auto;
}

background подводит итог background-color, background-image, background-position и background-repeat (в таком порядке). Два других в настоящее время не могут быть включены в background (хотя спецификация W3C говорит об обратном).

background-attachment:fixed аналогично position:fixed для слоев и гарантирует, что изображение остается видимым независимо от того, как пользователь прокручивает. если вы не хотите этого, оберните контейнер вокруг вашего контента и присвойте ему вышеуказанное объявление вместо HTML -node

background-size масштабирует изображение в фоновом режиме немного поиграйте со значением - то, что я здесь предложил, будет масштабировать изображение до ширины области просмотра. 100% 100% будет растягивать его, чтобы он всегда покрывал весь видовой экран, а auto 100% масштабирует его, чтобы он соответствовал высоте видового экрана. В обоих случаях, которые используют auto, может произойти некоторое ограничение - или цвет фона (я выбрал красный) будет отображаться по бокам / сверху и снизу

давая HTML -узел width:100%;height:100%, чтобы убедиться, что у вас нет белой рамки внизу, если ваш контент не заполняет экран

Answer 2

Не ясно, какие у вас проблемы.Вот пример того, что вы можете сделать: http://jsfiddle.net/mhgdZ/