Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.65/34: Рейтинг темы: голосов - 34, средняя оценка - 4.65
 Аватар для Pingvin001
1 / 1 / 0
Регистрация: 22.03.2014
Сообщений: 142

Не работает cover в background-size

08.12.2018, 20:42. Показов 6674. Ответов 4
Метки css, html (Все метки)

Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Проверка background-size: cover 5</title>
<META HTTP-EQUIV="Content-type"CONTENT="text/phpl; charset=utf-8">
 
<style type="text/css">
.banner {
heigth:200px;
background: url(http://www.pingvin123.100ms.ru/exec/img/banner.jpg)  no-repeat;/* 100% 100% cover banner. png – рядом есть и такой файл*/ /* При background-image нет даже части фона*/
background-size: cover;/* 100% 400 px auto contain*/
<!-- css cover background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain -->
</style>
</head>
<body>
<div class="banner">
Без этой строки нет совсем даже части фона, закрывающего эту строку
<!-- <a href="#" target="_blank"><img src="http://www.pingvin123.100ms.ru/exec/img/banner.png" width=901 height=60 border=1></a>-->
</div>
<br>
Выполнился скрипт
</body>
</html>
Я работаю под FireFox последней версии, поэтому -moz-background-size:cover; не использую, который нужно было использовать до версии 4.0 FireFox.
В браузерах Хром, IE, при нахождении файла-фона в каталоге рядом со страницей, и при изображении jpg или png – вид тот же: ширина во весь экран, а по высоте показывается верхняя часть фона (где-то 1/3 изображения или 1/4), при «background:url('img1.jpg') 50% 50% no-repeat;» - выводится средняя часть изображения. Как сделать полное изображение по вертикали?

Добавлено через 35 минут
Если имя файла картинки поместить в одинарные кавычки – то же самое.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
08.12.2018, 20:42
Ответы с готовыми решениями:

Background-size cover не работает
Фоновое изображение не хочет нормально адаптивиться, мне нужно чтобы высота изображения была фиксированная а по ширине подстраивалась под...

Background-size: cover и contain. В чём разница?
Приветствую! Цитирую: cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или...

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо поддерживается браузерами. Однако, если...

4
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
08.12.2018, 20:53
Лучший ответ Сообщение было отмечено Pingvin001 как решение

Решение

у вас опечатка в свойстве height
1
 Аватар для Pingvin001
1 / 1 / 0
Регистрация: 22.03.2014
Сообщений: 142
08.12.2018, 22:49  [ТС]
Спасибо, действительно была опечатка (в CSS и HTML не показываются ошибки). А как без валидаторов её найти (это вопрос по отладке)?
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2381 / 1741 / 677
Регистрация: 07.08.2016
Сообщений: 4,095
09.12.2018, 09:45
Цитата Сообщение от Pingvin001 Посмотреть сообщение
А как без валидаторов её найти
Пользоваться нормальными текстовыми редакторами, которые сразу же проверяют синтаксис Например sublime text3
1
 Аватар для Pingvin001
1 / 1 / 0
Регистрация: 22.03.2014
Сообщений: 142
25.12.2018, 18:33  [ТС]
Цитата Сообщение от AlexZaw Посмотреть сообщение
Пользоваться нормальными текстовыми редакторами, которые сразу же проверяют синтаксис
Написание функций PHP и их атрибутов можно проверить выбрав синтаксис PHP в notepad++ (почему то сам он не входит в PHP-режим).
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.12.2018, 18:33
Помогаю со студенческими работами здесь

Background-size
#home { height: 700px; background: #222 url(../img/home-bg.jpg) no-repeat center bottom; background-size: cover; } При...

Background-size сильно растягивает фон
Проблема заключается в том, что параметр background-size:cover сильно растягивает фон, т.е. больше чем ширина экрана. Как это можно...

background-size — есть ли решение для IE 7, 8?
Насколько я знаю, это свойство поддерживается, начиная с IE9. Но, может быть, есть решения, как заставить это работать на ранних версиях?...

Background-size c svg изображениями в safari
Здравствуйте! Кто-нибудь знает как заставить сафари правильно отображать svg в background? Вот ссылка на результат:...

Как узнать размеры background-size: contain ?
Доброй ночи! Есть блок с background-size: contain. Размеры блока известны, размеры оригинальной картинки тоже. После применения...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT?
DevAlt 26.03.2026
Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru