Масштабируемый фон

Чтобы быть профессионалом в своём деле нужно знать предмет досконально. К сожалению, нам иной раз что-то мешает стать хорошим специалистом неправильная расстановка приоритетов. Мы говорим себе, что нам не хватает времени, средств для изучения той же спецификации CSS и продолжаем изучать веб-программирование ставшими уже стандартными и излюбленными методами – методом «научного тыка» и методом «проб и ошибок».

replaced element – как расписано в спецификации CSS - это элементы, на которые распространяются особые, специальные правила расчёта размеров. Например, если для определённого элемента (в нашем случае, это картинка) указан только один размер (например, ширина) второй (высота) рассчитывается автоматически с соблюдением пропорций и наоборот.

Например,чтобы фоновая картинка растягивалась в окне браузера по ширине, нужно в коде (в данном случае в HTML) прописать так:

<img src="/fonovaya_kartinka.jpg" style="width: 100%; height: auto;" />

Ну а чтобы картинка растягивалась по высоте (размер ширины будет автоматически пропорционален реальным размерам картинки по высоте).

<img src="/fonovaya_kartinka.jpg" style="width: auto; height: 100%;" />

Такой растягивающийся на всё окно браузера фон можно использовать не только для <body>, но также и внутри любого элемента.

Растягивание фоновой картинки на всё окно браузера

В случае, если вам нужно растянуть картинку на всю ширину и высоту браузера, нужно добавить к коду ещё и 100% - ную высоту (height: 100%;):

<img src="/onovaya_kartinka.jpg" style="width: 100%; height: 100%;" />

Но в таком случае картинка не сохранит свои пропорциональные размеры и может отображаться не совсем красиво.

Также следует принимать во внимание, что если картинка в высоком качестве – весить она будет немало, что увеличит трафик и возможно даже будет негативно влиять на посещаемость ресурса – ведь пользователь, у которого невысокая скорость интернет-соединения может не дождаться загрузки странички и уйти с вашего сайта.