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



 

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

Открыть тему
Тема закрыта
> Как решить проблему CSS растяжка блока, background-size
kelevra
kelevra
Topic Starter сообщение 11.1.2016, 14:01; Ответить: kelevra
Сообщение #1


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


Такая проблема.
Существует Изображение 1 экрана. Шириной 1400px.

CSS:
Код
#screen1wrapper {
width: 100%;
height: 560px;
background: url(images/screen1image.jpg) no-repeat fixed;
  -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
}


При на ноутбуке отображается правильно:
Прикрепленное изображение

При увеличении маштаба получается такое:
Прикрепленное изображение

При уменьшении маштаба получается такое, наложение на текст:
Прикрепленное изображение


То есть на разных экранах отображается по разному.
Каким образом добиться того, чтобы отображалось везде фиксировано? при условии того, что ширина изображения 1400px. Фиксированную ширину блока в 1400px ставить нет смысла, т.к при больших разрешениях экрана будет виден конец.

Может кто сталкивался с этим и совет даст?


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 11.1.2016, 14:13; Ответить: Geers
Сообщение #2


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


У вас вообще бардак, свойства стилей противоречат друг другу.
По коду все правильно отображается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kelevra
kelevra
Topic Starter сообщение 11.1.2016, 14:21; Ответить: kelevra
Сообщение #3


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


Так может подскажете?
Вот ссылка на сайт, если кому нужна:
http://goo.gl/55gjqR

Сообщение отредактировал kelevra - 11.1.2016, 14:21


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 11.1.2016, 14:22; Ответить: mmkulikov
Сообщение #4


Старожил
******

Группа: Active User
Сообщений: 2027
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(kelevra @ 11.1.2016, 12:01) *
background-size: 100%;

Для Ваших целей необходимо использовать не 100% , а contain


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kelevra
kelevra
Topic Starter сообщение 11.1.2016, 14:22; Ответить: kelevra
Сообщение #5


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


Может как то зафиксировать и растянуть??


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexandr_js
Alexandr_js
сообщение 11.1.2016, 14:25; Ответить: Alexandr_js
Сообщение #6


Участник
***

Группа: User
Сообщений: 237
Регистрация: 21.7.2015
Поблагодарили: 43 раза
Репутация:   8  


kelevra,
надо связать 2 картинки вместе, чтобы высота была одинаковая, тогда будет все работать.

Сообщение отредактировал Alexandr_js - 11.1.2016, 14:34


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 11.1.2016, 14:25; Ответить: mmkulikov
Сообщение #7


Старожил
******

Группа: Active User
Сообщений: 2027
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(kelevra @ 11.1.2016, 12:21) *
Вот ссылка на сайт

Так на сайте у Вас совсем по другому сверстано... :pardon:


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kelevra
kelevra
Topic Starter сообщение 11.1.2016, 14:37; Ответить: kelevra
Сообщение #8


Участник
***

Группа: User
Сообщений: 187
Регистрация: 29.7.2012
Из: Бишкек
Поблагодарили: 7 раз
Репутация:   -3  


А для слайдера на главной каким образом так сделать?


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
10 PostBrigada 1124 Вчера, 22:40
автор: JOHNY
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 507 Вчера, 21:34
автор: Pingunio
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29911 Вчера, 13:04
автор: BestExchangers
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКак черные SEO оптимизаторы собирают миллионы посетителей по высоко-актуальным запросам в Яндексе
5 serg5777 1549 Вчера, 11:05
автор: Ley
Открытая тема (нет новых ответов) Как действительно успешно внедрять привычки. И менять жизнь
seoandme.ru - SEO-блог Анны Ященко
14 AnnaYa 1420 Вчера, 8:49
автор: kaverima80


 



RSS Текстовая версия Сейчас: 16.12.2017, 5:55
Дизайн