Масштабируемый фон
Чтобы быть профессионалом в своём деле нужно знать предмет досконально. К сожалению, нам иной раз что-то мешает стать хорошим специалистом неправильная расстановка приоритетов. Мы говорим себе, что нам не хватает времени, средств для изучения той же спецификации CSS и продолжаем изучать веб-программирование ставшими уже стандартными и излюбленными методами – методом «научного тыка» и методом «проб и ошибок».
replaced element – как расписано в спецификации CSS - это элементы, на которые распространяются особые, специальные правила расчёта размеров. Например, если для определённого элемента (в нашем случае, это картинка) указан только один размер (например, ширина) второй (высота) рассчитывается автоматически с соблюдением пропорций и наоборот.
Например,чтобы фоновая картинка растягивалась в окне браузера по ширине, нужно в коде (в данном случае в HTML) прописать так:
Ну а чтобы картинка растягивалась по высоте (размер ширины будет автоматически пропорционален реальным размерам картинки по высоте).
Такой растягивающийся на всё окно браузера фон можно использовать не только для <body>, но также и внутри любого элемента.
Растягивание фоновой картинки на всё окно браузера
В случае, если вам нужно растянуть картинку на всю ширину и высоту браузера, нужно добавить к коду ещё и 100% - ную высоту (height: 100%;):
Но в таком случае картинка не сохранит свои пропорциональные размеры и может отображаться не совсем красиво.
Также следует принимать во внимание, что если картинка в высоком качестве – весить она будет немало, что увеличит трафик и возможно даже будет негативно влиять на посещаемость ресурса – ведь пользователь, у которого невысокая скорость интернет-соединения может не дождаться загрузки странички и уйти с вашего сайта.