Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
mirotwor777
0 / 0 / 0
Регистрация: 30.10.2016
Сообщений: 32
1

Google Chrome: Фон наполовину отображает картинку

13.08.2018, 05:38. Просмотров 166. Ответов 3
Метки нет (Все метки)

Есть код, в Гугл хроме отображается только часть картинки, в Фаирфоксе все нормально. Как исправить? Изображение 500х200. Сайт на Бутстрапе. Как в Хроме растянуть всю картинку?
HTML5
1
2
3
            <div class="top-bar-6">
                <h2>Service</h2> 
            </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.top-bar-6 {
    color: #333;
    padding: 150px 0 150px; 
    background: -webkit-linear-gradient( rgba(22, 22, 22, .5), rgba(22, 22, 22, .5)), url(../img/mini_6.jpg); /* Он не срабатывает*/
    background: linear-gradient( rgba(22, 22, 22, .5), rgba(22, 22, 22, .5)), url(../img/mini_6.jpg);  /* Firefox срабатывает*/
    background: rgb(140,40,140);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
    width:100%; 
}
0
Миниатюры
Google Chrome: Фон наполовину отображает картинку   Google Chrome: Фон наполовину отображает картинку  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.08.2018, 05:38
Ответы с готовыми решениями:

Не отображает стили к div в Google Chrome
Всем привет, столкнулся с такой проблемой, что когда задаю стили к блоку &lt;div&gt;...

IE не отображает фон div-а
Здравствуйте. Кто знает баги ИЕ - подскажите, пожалуйста, такой вопрос. ...

Chrome не отображает шапку
Мб не в тот раздел пишу, но все таки - поменял картинку шапки на сайте, Chrome...

Chrome некорректно отображает таблицу
Есть два абсолютно одинаковых кода. И пока файл находится в формате html всё...

Не отображает background color в Chrome, в Mazile показывает то, что и должно быть!
Код CSS: * { margin: 0; padding: 0; } ul { list-style: none; } a {...

3
Freeze_Breeze
213 / 225 / 87
Регистрация: 12.01.2016
Сообщений: 1,353
13.08.2018, 23:16 2
mirotwor777,
Цитата Сообщение от mirotwor777 Посмотреть сообщение
Есть код, в Гугл хроме отображается только часть картинки, в Фаирфоксе все нормально. Как исправить?
Ну для начала можно посмотреть в инспекторе, только Вы сможете увидеть почему хром обрезает изображение.
Вы показали только стили своей картинки, возможно родительские блоки воду мутят.
У Вас это свойство перекрывает выше стоящие свойства background
CSS
1
background: rgb(140,40,140);
А что этой строкой Вы собрались делать?
Такая запись будет работать?
CSS
1
background: linear-gradient( rgba(22, 22, 22, .5), rgba(22, 22, 22, .5)), url(../img/mini_6.jpg);
0
AlexZaw
516 / 527 / 249
Регистрация: 07.08.2016
Сообщений: 1,733
Завершенные тесты: 2
14.08.2018, 00:25 3
Цитата Сообщение от Freeze_Breeze Посмотреть сообщение
Такая запись будет работать?
Будет, просто фоны накладываются друг на друга. Погуглите на тему множественных фонов. Правда непонятно зачем это градиентом делается.
По теме: если хотите чтобы вам помогли - покажите код который воспроизводит проблему. Вы же в автосервис не принесете колесо с просьбой определить почему машина не заводится ?
0
mirotwor777
0 / 0 / 0
Регистрация: 30.10.2016
Сообщений: 32
15.08.2018, 05:45  [ТС] 4
НАжимаем на кнопку- Выходит модальное окно. И вот с шапкой проблемы
0
Вложения
Тип файла: 7z Пример.7z (5.91 Мб, 0 просмотров)
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.08.2018, 05:45

Большой фон на картинку
Добрый день друзья, потребовалась ваша помощь в решение одной задачи. Имеет...

Фон обрезает картинку
Как сделать чтоб фон обрезал картинку. Пример ниже!

Как поставить на фон картинку?
Как можно поставить на фон картинку? если картинка находится на рабочем столе в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru