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



 

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

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


Участник
***

Группа: User
Сообщений: 191
Регистрация: 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
Сообщений: 191
Регистрация: 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
Сообщений: 2124
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 610 раз
Репутация:   70  


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

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


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


Участник
***

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


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


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


Участник
***

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


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

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


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


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

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


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

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


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


Участник
***

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


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как защитить свои данные в общественном Wi-Fi?
8 unazekoff 323 Сегодня, 6:13
автор: unazekoff
Открытая тема (нет новых ответов) Как получить от своей группы Вконтакте максимум?
6 VilD 1498 Вчера, 15:31
автор: laser
Открытая тема (нет новых ответов) Как организовать индексацию защищенных pdf с ключами и ссылками
И разместить pdf на внешних жирных ресурсах
1 kirch 650 Вчера, 14:35
автор: kirch
Горячая тема (нет новых ответов) Как заработать новичку?
142 Emeralda 25778 23.5.2018, 17:07
автор: Vlad_Sokolov
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКак носить смартфоны диагональю 5.5 - 6.4 дюйма?
42 Room 5166 23.5.2018, 13:36
автор: wertu


 



RSS Текстовая версия Сейчас: 25.5.2018, 7:39
Дизайн