Как растянуть страницу на весь экран?
Здравствуйте! У меня есть сайт. И у меня проблема: не знаю, как растянуть страницу до конца экрана. Рамка страницы как бы обтекает текст и заканчивается, где заканчивается текст. А я хочу, чтобы футер был в самом низу и, где нет текста, пусть будет пустое пространство. Это мой style.css. Ниже есть и другие строки, но они относятся к описанию свойств, стилей кнопок, списков и др. мелочей.
* < margin: 0px; padding: 0px; >html < height: 100%; >body < background-attachment: fixed; background-image: url("images/bg.jpg"); background-position: top left; background-repeat: repeat; height: 100%; margin: 0px auto; padding: 0px; width: 100%; >.bg-glad < background-attachment: fixed; background-image: url("images/page_gl.png"); background-position: top left; background-repeat: no-repeat; bottom: 0px; left: 0px; position: relative; right: 0px; top: 0px; >#wrapper (основной контейнер в котором находится все за исключение футера) < background-color: #c9f8f8; border-radius: 30px; height: auto !important; margin: 0px auto; min-height: 100%; width: 992px; >/* Header; -----------------------------------------------------------------------------*/ #header < height: 175px; >.header-img < background-image: url("images/header.jpg"); background-position: center center; background-repeat: no-repeat; border-radius: 20px 20px 0px 0px; height: 175px; position: absolute; top: 0px; width: 992px; >#zag < color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 20px; margin: 60px 0px 0px 15px; position: absolute; >#zag a < color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 30px; text-decoration: none; >#zag a:hover < color: #fcffbd; text-decoration: underline; >/* begin Flash */ #art-flash-area < border-radius: 20px; height: 175px; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 992px; >#art-flash-container < height: 248px; left: 0px; position: absolute; top: -36px; width: 992px; >#art-flash-container div.art-flash-alt < height: 30px; margin: 0px auto; position: relative; top: 36px; width: 110px; >/* Header END; -----------------------------------------------------------------------------*/ /* Middle; #middle (контейнер идущий сразу за хедером внутри wraper после хедера занимает все оставшееся пространство) < height: 1%; padding: 0 0 100px; position: relative; width: 100%; >; #middle:after < clear: both; content: '.'; display: block; height: 0; visibility: hidden; >; #container (находится в нутри middle соседствует с left sidbar) < float: right; width: 100%; z-index: 3; >; #content (контейнер внутри container содержащий контент) < background-color: #b1f6b9; display: block; margin: 5px 5px -5px 225px; overflow: auto; position: relative; top: 40px; >; /* menu (синее меню под хедером); -----------------------------------------------------------------------------*/ .menu < background: url("images/nav.png") repeat-x; display: block; overflow: hidden; position: absolute; width: 992px; z-index: 5; >.menu ul < display: block; list-style: none; >.menu ul li < display: block; float: left; margin: 0px 10px; padding: 10px 15px; >.menu ul li a < color: #fff; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: none; >.menu ul li:hover < background: url("images/nav_hover.png") repeat-x; display: block; >.menu ul li a:hover < color: #fff; display: block; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: underline; z-index: 5; >/* Vipadayuchie menu; -----------------------------------------------------------------------------*/ #biz_menu < background: #0204a2; display: none; float: left; margin-left: 105px; position: absolute; top: 35px; z-index: 3; >#biz_menu div < display: block; padding: 2px 20px 2px 10px; >#biz_menu div:hover < background: #3983f9; >#biz_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#biz_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#plati_menu < background: #0204a2; display: none; float: left; margin-left: 310px; position: absolute; top: 35px; z-index: 3; >#plati_menu div < display: block; padding: 2px 30px 2px 10px; >#plati_menu div:hover < background: #3983f9; >#plati_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#plati_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#bg < background-image: url("images/vmenu1.png"); background-position: right; background-repeat: no-repeat; >#bg:hover < background-image: url("images/vmenu.png"); background-position: right; background-repeat: no-repeat; >#privat_menu < background: #0204a2; display: none; float: left; margin-left: 450px; position: absolute; top: 35px; z-index: 3; >#privat_menu span div < display: block; padding: 2px 20px 2px 10px; >#privat_menu span div:hover < background: #3983f9; >#privat_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#privat_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#poker_menu < background: #0204a2; display: none; float: left; margin-left: 282px; margin-top: 130px; position: absolute; top: 35px; z-index: 3; >#poker_menu span div < display: block; padding: 2px 20px 2px 10px; >#poker_menu span div:hover < background: #3983f9; >#poker_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#poker_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >/* Sidebar Left (левый сайд бар находится в нутри middle); -----------------------------------------------------------------------------*/ #sideLeft < background: #b1f6b9; display: block; float: right; height: 100%; margin-right: -220px; position: relative; top: 44px; width: 215px; z-index: 1; >#calend < display: block; margin: 15px; >.zagolovok < background-image: url("images/vmenu_sb.png"); background-repeat: no-repeat; color: white; font-size: 22px; font: Georgia, Geneva, sans-serif; height: 30px; padding: 2px 0px; text-align: center; >/* Footer; -----------------------------------------------------------------------------*/ #footer
Как растянуть картинку на весь размер экрана
Ничего на эту тему не нашел. Мне нужно что бы картинка не просто увеличивалась, теряя свою часть за границей экрана, а именно расстягивалась на всю ширину и высоту, игнорируя пропорции. Пытался background:url(am.jpg) no-repeat center center fixed; , не работает так как мне надо
Отслеживать
задан 27 дек 2020 в 22:03
54 6 6 бронзовых знаков
на всю высоту и ширину это значит терять пропорции в большинстве случаев. вам там на выбор background-size: cover/contain
27 дек 2020 в 22:11
Такой вариант не получается, картинка все равно сохраняет пропорции
27 дек 2020 в 23:24
сеачало надо указать размер html,body то есть height: 100% потом писать уже background url и background size
Как растянуть картинку на весь экран с помощью css и других проверенных способов
Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку css на весь экран?» На самом деле такой прием очень просто реализовывается, но тут дело в другом.
На сегодняшний день существует множество способов и языков программирования, благодаря которым изображение может размещаться на целый экран. Поэтому в данной публикации я расскажу о нескольких способах создания полноразмерного фонового изображения при помощи css, css3, jquery и php. Приступим к делу!
Способ 1. Адаптивная фоновая картинка css-средствами
Для того чтобы сделать фоновое изображение адаптивным, в каскадных стилевых таблицах предусмотрено свойство background- size. Оно позволяет установить размер графического файла по отношению к размерности открытой вкладки браузера.
Для этого нужно всего лишь написат вот такую строку:
background- size: 100% auto
Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Пример с css body < background: url(https://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) no-repeat center top fixed; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; color:#191970; >div < background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; >h1Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Такой способ поддерживают браузеры, начиная с 10 версии Opera, 3 версии Safari, Firefox 3.6 и 9 версии IE.
Способ 2. Резиновый фон при помощи css3
С выходом в мир спецификации css3 в язык добавилось много удобных инструментов. Так, для создания растянутого фона в виде изображения используется то же свойство, что и в предыдущей главе, однако размер изображения задается не процентами, а специальным словом cover: background- size: cover. Очень удобно, не правда ли?
Чтобы посмотреть, как работает данное свойство, запустите прошлый пример, изменив в параметры background-size 100% и auto на cover.
Что касается браузеров, то такой способ поддерживают все современные версии.
Для тех, кто хочет разобрать вариант с css подробнее, я рекомендую найти статью на моем блоге о резиновом фоне, где я подробно и с примерами описал данные методы.
Способ 3. jQuery и его инструменты создания адаптивного фона
Для начала хочу сказать, что jQuery – это библиотека другого языка – JavaScript – которая упрощает функционирования последнего с html.
Сам по себе jQuery очень удобен. С ним проще работать с API, легче получать доступ к различным элементам кода, а также проще реализовывать некоторые вещи.
Для того чтобы в примере заработал данный способ, нужно вначале подключить скрипт js вот такой строкой:
Ниже я прикрепил программный код примера с уже вставленной в него реализацией jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
Пример с jQuery body < background-size: cover; color:#191970; >div < background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; >h1 < color: #191970; text-shadow: 3px 2px 1px #fff; >#b-g < top: 0; left: 0; z-index:-1; position: fixed; >.b-g-w < width: 100%; >.b-g-hПланетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.
Способ 4. Php-реализация растянутого на весь экран изображения
Несколько слов о самом языке. Php принято называть языком сценариев. С его помощью пишут серверную часть веб-приложений, т.е. связывают сервис с базой данных, обрабатывают запросы и т.д. Сам код php внедряется в html и гибко взаимодействует с ним.
Чтобы вставить кусок кода, нужно прописать текст в вот таких скобках:
А теперь в первоначальный пример вам нужно вставить всего лишь несколько строк:
1 2 3 4 5
Я рассказал все, что хотел донести до вас о четырех способах растяжения изображений на весь экран. Однако хочу заметить, что реализация такого подхода при помощи css намного удобнее, легче, популярнее и к тому же изменения вступают в силу сразу же.
В этот момент, например, решение на языке php применится к рисунку только после отработки функции на сервере.
На этой ноте я заканчиваю статью. Не забывайте подписываться на мой обучающий блог и делиться ссылкой на публикации с друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 6134 раз
Понравилась статья? Поделись с друзьями:
Этот блог уже читают
читай и ты!
Да, хочу читать и Я
Как вставить видео, чтобы оно было во весь экран?
Нужно видео задать размеры через CSS, например, поставив width: 100% и height: 100vh. Но нужно видео с соответствующим пропорциями, чтобы оно правильно покрывало 100% экрана.
Отслеживать
ответ дан 27 фев 2016 в 7:11
2,897 1 1 золотой знак 14 14 серебряных знаков 24 24 бронзовых знака
Давайте рассмотрим этот элемент:
Мы можем перевести это видео в полноэкранный режим режим следующими скриптами:
var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) < elem.requestFullscreen(); >else if (elem.mozRequestFullScreen) < elem.mozRequestFullScreen(); >else if (elem.webkitRequestFullscreen)
Движек Gecko автоматически добавляет CSS правила к элементу, чтобы растянуть его для заполнения экрана: «width: 100%; height: 100%» . WebKit этого не делает; вместо этого происходит центрирование полноэкранного элемента по размеру вероятной черной области. Для получения необходимого полноэкранного поведения в движке WebKit, необходимо самостоятельно добавить собственные «width: 100%; height: 100%;» CSS правила к элементу:
:-webkit-full-screen #myvideo
- перевод собственный, почти дословный