X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать резиновый фон в HTML?
mrbean
mrbean
Topic Starter сообщение 25.5.2014, 1:48; Ответить: mrbean
Сообщение #1


Здравствуйте. Помогите пожалуйста новичку! Как сделать "резиновый" фон на сайте. На широкоформатном мониторе все гуд, а на смартфоне в вертикальном положении картинка искажается. как сделать в HTML, чтоб она не искажалась, а перематывалась? Заранее благодар за ответ!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 26.5.2014, 14:27; Ответить: klenovnn
Сообщение #2


На смартфоне рекомендую заменять изображение средствами css как вариант (@media), так как при вертикальном положение картинка правильно отображаться не сможет в принципе, потому что соотношение сторон совершенно другое.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mrbean
mrbean
Topic Starter сообщение 26.5.2014, 23:43; Ответить: mrbean
Сообщение #3


Если не сложно, можете написать код. Вот код моей страницы
<html>
<head>
<title>London the best city</title>
</head>
<img src="11111.jpg" width="100%" height="140%">
</html>

На мониторе все ок.
Необходимые задачи: 1) Резиновый фон, чтоб на любом экране (комп, смартфон, планшет) изображение не искажалось.
2) Чтоб вокруг изображения небыло белой рамки
Если кто может, напишите пожалуйста полный код
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Amy Mammoth
Amy Mammoth
сообщение 27.5.2014, 14:59; Ответить: Amy Mammoth
Сообщение #4


Задача не совсем ясна, по причине не ясно что у вас за фон (фиксированный/не фиксированный, повторяющийся/не повторяющийся)
Если вам нужен ФОН, то использовать следует свойство 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>


В живую

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЕсли h1 сделать ссылкой на главную
для главной это лучше будет?
10 muratastana 614 Вчера, 22:24
автор: GlazAlmaz
Опрос (нет новых голосов) Опрос: Как молодёжь вводят в заблуждение на крипто бирже
10 Room 1126 Вчера, 18:43
автор: Instacrypt_online
Открытая тема (нет новых ответов) Можно ли заработать на YouTube в 2022 году и как выводить деньги в странах СНГ?
11 theroadtofun 795 26.5.2022, 12:29
автор: EvilGomel
Горячая тема (нет новых ответов) ВНИМАНИЕ: Как самостоятельно продвинуть сайт? Научу!
консультации в домашних условиях :)
273 GlazAlmaz 297583 25.5.2022, 20:23
автор: GlazAlmaz
Горячая тема (нет новых ответов) Атака клонов! Или как бороться с мультиаккаунтами.
143 Pelican_Program 54117 25.5.2022, 1:28
автор: Pelican_Program


 



RSS Текстовая версия Сейчас: 28.5.2022, 2:29
Дизайн