Правила форума Гаранты форума
Размещение рекламы AMX-X компилятор

Здравствуйте, гость Вход | Регистрация

Наши новости:

14-дек
24-апр
10-апр
11-апр

2 страниц V   1 2

Мобильная верстка фона

Статус пользователя AZA
сообщение 6.3.2016, 15:13
Сообщение #1


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

Приветствую.Нужна помощь с фоном:)
Пример:http://csgo.ml/aza/
Имеем код:
Код:
    margin: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url(bc.jpg);


Суть проблемы в том,что если заходить с мобилы то фон не растягивается на весь экран,сама пичка размера 5862x4440,а размер мобильного экрана full hd аля 1920x1080.
Но не которые скажут,убери свойство повторение good.gif ,но тогда фон вообще каша становиться.


Cкрытый текст


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   Цитировать сообщение
Статус пользователя maarik
сообщение 6.3.2016, 16:53
Сообщение #2


Стаж: 18 лет

Сообщений: 821
Благодарностей: 257
Полезность: 711

Меценат Меценат

У меня так отображается.
Cкрытый текст
Прикрепленное изображение
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Topce
сообщение 6.3.2016, 17:29
Сообщение #3
Стаж: 12 лет

Сообщений: 198
Благодарностей: 42
Полезность: 169

Во-первых, очень долго грузило
Во-вторых, отличное чем у тс )
Прикрепленные файлы:
Прикрепленное изображение


Все что ни делается - делается к лучшему.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 6.3.2016, 17:31
Сообщение #4


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

Topce, У меня нету продукции apple)
Это Xiaomi medal.gif


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Fred Perry
сообщение 6.3.2016, 19:11
Сообщение #5


Иконка группы

Стаж: 16 лет

Сообщений: 6594
Благодарностей: 2370
Полезность: 813

А в чем проблема заключается? Я почитал пару раз и не понял


You become responsible, forever, for what you have tamed
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 2 раз
   + Цитировать сообщение
Статус пользователя hacker63
сообщение 6.3.2016, 19:11
Сообщение #6


Стаж: 13 лет

Сообщений: 368
Благодарностей: 42
Полезность: < 0

Я не понял в чем проблема blush2.gif
Какой результат ты хочешь получить?

Отредактировал: hacker63, - 6.3.2016, 19:12
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя GOOD FELLOW
сообщение 6.3.2016, 19:25
Сообщение #7


Иконка группы

Стаж: 13 лет

Сообщений: 2294
Благодарностей: 1187
Полезность: 890

hacker63, резиновый фон
Юзай Гугл, там есть все это
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя hacker63
сообщение 6.3.2016, 19:31
Сообщение #8


Стаж: 13 лет

Сообщений: 368
Благодарностей: 42
Полезность: < 0

Ну если резиновый фон то подключай js.

Код:
function heightDetect() {
$(".main_head").css("height", $(window).height());
};
heightDetect();
$(window).resize(function() {
heightDetect();
});
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 6.3.2016, 19:37
Сообщение #9


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

Fred Perry,
Cкрытый текст
,что если заходить с мобилы то фон не растягивается на весь экран


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя ThisIsSparta
сообщение 6.3.2016, 20:10
Сообщение #10
Стаж: 11 лет

Сообщений: 566
Благодарностей: 307
Полезность: 600

AZA, все равно не понятно что тебе нужно нормально же отображается на мобиле
попробуй background-size: 100%;
ну или на худой конец

Код
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>        



<style>
    @media screen and (max-width: 480px) {
        html {
            -webkit-text-size-adjust: none;
        }
        body {
            background-size: 100%;
        }
    }
</style>



Отредактировал: ThisIsSparta, - 6.3.2016, 20:11
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя xavi
сообщение 6.3.2016, 20:23
Сообщение #11
Стаж: 11 лет

Сообщений: 271
Благодарностей: 244
Полезность: 871

Суть в том что ты заставил всех видеть изображение в том размере что оно есть, и не зависимо будь то компьютер или телефон (смартфон).
Попроьуйте применть под конкретные разрешения:
@media screen and (max-width: 800px) {
body {width: 95%;}
}
@media screen and (max-width: 768px) {
body {width: 95%;}
}
@media screen and (max-width: 600px) {
body {width: 95%;}
}
@media screen and (max-width: 384px) {
body {width: 95%;}
}
@media screen and (max-width: 360px) {
body {width: 95%;}
}
@media screen and (max-width: 320px) {
body {width: 95%;}
}
а если хотите быть точнее то укажите как сказали в процентах.

это даст 100 процентное соотношение к браузеру
body {
background-image: url(bc.jpg) no-repeat;
background-position-y: 100%;
background-position-x: 100%;
background-size: 100% 100%;
}

Отредактировал: xavi, - 6.3.2016, 20:27
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 6.3.2016, 20:34
Сообщение #12


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

ThisIsSparta, Твой вариант
http://rghost.ru/8zqJXf2PS


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя xavi
сообщение 6.3.2016, 20:41
Сообщение #13
Стаж: 11 лет

Сообщений: 271
Благодарностей: 244
Полезность: 871

AZA, Объясните свой вариант а то и мне не понятно.

Цитата(xavi @ 6.3.2016, 20:41) *
AZA, Объясните свой вариант а то и мне не понятно.

а вернее суть вашего сообщения.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 6.3.2016, 20:49
Сообщение #14


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

xavi, Что тут не видно,на самом последнем скрине который я кинул?Фон не хочет растягиваться по высоте,твой код тоже пробовал и сразу заменил на высоту,не помогло.


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя xavi
сообщение 6.3.2016, 21:00
Сообщение #15
Стаж: 11 лет

Сообщений: 271
Благодарностей: 244
Полезность: 871

Цитата(AZA @ 6.3.2016, 21:49) *
xavi, Что тут не видно,на самом последнем скрине который я кинул?Фон не хочет растягиваться по высоте,твой код тоже пробовал и сразу заменил на высоту,не помогло.

при чем тут высота, высота зависит от последующих блоков, речь идет о background
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Orty_Hart
сообщение 15.3.2016, 17:48
Сообщение #16
Стаж: 14 лет

Сообщений: 1399
Благодарностей: 408
Полезность: 725

AZA, используй min-width: 1000px; в body.
при загрузке с тл и других устройств, будет нормально. попробуй.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 15.3.2016, 17:55
Сообщение #17


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

Orty_Hart, это я пробовал.Баг есть один.Позже покажу)


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Orty_Hart
сообщение 17.3.2016, 13:56
Сообщение #18
Стаж: 14 лет

Сообщений: 1399
Благодарностей: 408
Полезность: 725

AZA,
попробуй так:
Код
<style>
bodu {position: relative;}
.bg {background: url('images/bg.png') no-repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0;  background-size: contain;}
</style>
<bodu>
<div class=""bg">
// тут вся страница.
</div>
</body>


суть: растянуть фон на весь экран залив туда фон картинки и растянуть картинку на весь экран.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя AZA
сообщение 17.3.2016, 14:24
Сообщение #19


Стаж: 11 лет

Сообщений: 479
Благодарностей: 173
Полезность: 490

Orty_Hart, Так же.


*
* puk
*
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Profan
сообщение 17.3.2016, 15:30
Сообщение #20


Стаж: 10 лет
Город: Сочи

Сообщений: 1317
Благодарностей: 403
Полезность: 698

AZA, AZA,
css
background: url('bc.jpg') no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
height: 100%;

Cкрин PC

Cкрин mobile


Отредактировал: Profan, - 17.3.2016, 15:31
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 1 раз
   + Цитировать сообщение
2 страниц V   1 2
 
Ответить в данную темуНачать новую тему
 
0 пользователей и 1 гостей читают эту тему: