Помощник
 |
|
|
|
|
Сообщение сайта
|
 Как сделать резиновый фон в HTML? |
mrbean
|
Сообщение
#1
|
||
|
0  Группа: User Сообщений: 2 Регистрация: 25.5.2014 Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
klenovnn
|
 26.5.2014, 14:27;
Ответить: klenovnn
Сообщение
#2
|
|
Новичок Группа: Viewer Сообщений: 0 Регистрация: 6.5.2009 Поблагодарили: 0 раз Репутация: 0
|
На смартфоне рекомендую заменять изображение средствами css как вариант (@media), так как при вертикальном положение картинка правильно отображаться не сможет в принципе, потому что соотношение сторон совершенно другое.
|
|
|
|
|
mrbean
|
Сообщение
#3
|
|
0 Группа: User Сообщений: 2 Регистрация: 25.5.2014 Поблагодарили: 0 раз Репутация: 0
|
Если не сложно, можете написать код. Вот код моей страницы
<html> <head> <title>London the best city</title> </head> <img src="11111.jpg" width="100%" height="140%"> </html> На мониторе все ок. Необходимые задачи: 1) Резиновый фон, чтоб на любом экране (комп, смартфон, планшет) изображение не искажалось. 2) Чтоб вокруг изображения небыло белой рамки Если кто может, напишите пожалуйста полный код |
|
|
|
|
Amy Mammoth
|
27.5.2014, 14:59;
Ответить: Amy Mammoth
Сообщение
#4
|
|
|
0 Группа: User Сообщений: 0 Регистрация: 26.10.2013 Поблагодарили: 0 раз Репутация: 0
|
Задача не совсем ясна, по причине не ясно что у вас за фон (фиксированный/не фиксированный, повторяющийся/не повторяющийся)
Если вам нужен ФОН, то использовать следует свойство css background-image, если требуется вставить картинку, то <img>, собственно в вашем случае должен быть фон т.е. background-image. Резиновый фон на css3 реализуется средствами background-size:cover; не работает в ie ниже ie9. как вариант: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Резиновый фон</title> <style> *{margin:0;padding:0;} html, body{ height: 100%; width: 100%; } #bg{ `background: transparent url(http://s2.goodfon.ru/image/318573-2560x1600.jpg) no-repeat fixed center center / cover; /*Сокращённая форма записи (background-size: cover; лучше писать отдельно) */ background-color: transparent; background-image: url(http://s2.goodfon.ru/image/318573-2560x1600.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /*НЕ РАБОТАЕТ В IE НИЖЕ 9 ВЕРСИИ*/ `background-attachment: fixed; /*Если фон фиксированный*/ width:100%; height:100%; min-height:600px; } @media screen and (max-width:800px) and (max-height:600px){ #bg{ background-image: url(http://s2.goodfon.ru/image/318573-800x600.jpg); } } @media screen and (max-width:400px){ #bg{ background-position: 35% center; } } </style> </head> <body> <div id="bg"></div> </body> </html> В живую
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Арбитражники, как ведете учет расходов и доходов? | 11 | Boymaster | 1803 | 17.4.2024, 23:35 автор: Boymaster |
 |
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4811 | 17.4.2024, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19709 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3101 | 5.4.2024, 5:53 автор: Skyworker |
|
Как бездомные хранят деньги? | 81 | metvekot | 13655 | 31.3.2024, 12:44 автор: Boymaster |
|
Текстовая версия | Сейчас: 19.4.2024, 16:52 |
