Фоновое изображение не отображается в firefox и IE

Я новичок в бутстрапе и общем веб-дизайне. Используя оригинальный bootstrap.css и файл HTML бутстрапом по умолчанию, я добавил это как мой пользовательский CSS:Фоновое изображение не отображается в firefox и IE

body { 
    margin: 0; 
    background: url("some image url"); 
    background-position: center top; 
    background-size: 1440px 800px; 
    background-repeat:no-repeat; 
    display: compact; 
}

и она отлично работает на хроме, но он не отображается на IE или Firefox. Используя firebug, я проверил css и получил следующее:

body { 
    background: url("some image url") repeat scroll center top/1440px 800px rgba(0, 0, 0, 0); 
    margin: 0; 
    }

Но я все еще не могу понять, где проблема. Есть ли другой способ написать простой фрагмент CSS, чтобы IE и firefox могли работать с ним?

изменить: я исправил проблему с полуколокой, но все еще не обнаружил. Firebug, показывающий:

body { 
margin: 0; 
background: url("some image url"); 
background-position: center top; 
/* background-size: cover; */ 
background-size: 1440px 800px; 
background-repeat:no-repeat; 
display: compact; 
    }

EDIT: Мне нужно было установить прямой путь к изображению или с помощью URL-адреса. Спасибо всем за ваши предложения и помощь!

источник

2015-06-30 tyrell_c

Отсутствует точка с запятой после 'background-repeat'? –

что есть дисплей: compact ;? – Stickers

@Pangloss "** compact **: в зависимости от контекста это значение для свойства отображения создает либо окно рендеринга в строке, либо уровень блока. В каждом случае различные свойства CSS могут применяться к компактному элементу. В контексте уровня блока , компактный элемент отображается в левом или правом поле элемента блока. Компактный элемент участвует в вычислениях высоты строки для текущей строки, а значение свойства «vertical-align» относится к блочному элементу ». - [источник] (http://www.css3.com/display/) – dippas

Здравствуйте @tyrell_c я думаю, что этот вопрос может быть то, что Firefox не поддерживает "дисплей: компактный" , также попробуйте исключить кавычки внутри изображения URL

источник

2015-06-30 13:53:07

Не работает. Похоже, не имеет значения, есть ли кавычки или нет. –

hey again, Я попробовал код, предоставленный u, и он работал просто отлично ... (testet на Firefox 25.0) не могли бы вы рассказать мне, какую версию Firefox вы используете? Спасибо –

Использование Firefox ESR 31.2.0 –

http://www.w3schools.com/css/css_background.asp

Вы должны изменить

background: url("some image url");

background-image: url("some image url");

источник

2015-06-30 13:51:09 Laurens

Я согласен, безусловно, проблема в этой строке, также не забудьте проверить URL-адрес изображения, путь изображение относится к файлу css, а не к странице, на которой ссылается css. –

Well все остальные ответы велики, и я всегда их использую, но если они не работают, вы можете сделать простой трюк, например добавить img только в начале тела и дать ему высоту и ширину 100%, чтобы фотография была отзывчивой в зависимости от размера экрана Это растянет фотографию и будет действовать как фоновая фотография для пользователя, потому что она будет выглядеть одинаково.

источник

2015-07-01 01:14:22

Это был отличный совет. Благодаря! –

Фоновое изображение не отображается в firefox и IE

ответ

Смежные вопросы