Как переопределить фоновое изображение, определенное в CSS с помощью другого CSS?

У меня есть "Core.css", который определяет фоновое изображение страницы вместе с темой для сайта. Но для конкретной страницы я хочу изменить только фон. Любые предложения о том, как это можно достичь в отдельном файле CSS?

HTML для страницы:

<head>
    <link rel="stylesheet" type="text/css" href="core.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />

И core.css определяет:

body
{
        background-image: url('bg.png');
}

В то время как index.css определяет:

body
{
    background-image:('homeBg.png');
}

Спасибо!

Ответы

Ответ 1

фон, определенный позже, должен заменить предыдущие. Поэтому, если у вас есть:

Site1.css, который имеет:

.img {
    background: ...
}

Site2.css, который имеет:

.img {
    background: ...
}

то Site2.css.img заменит .img в Site1.css, если Site2.css включен после Site1.css на вашей странице.

UPDATE: Я не уверен, почему тег тела не заменяется правильно. Не могли бы вы дать ему класс или id и использовать это вместо тела?

например.

<body id="backgroundTest">

И тогда в css файлах вы бы сделали #backgroundTest { background-image... }

И на всякий случай, вы можете проверить, существует ли homeBg.png и index.css. http://yourpage.com/homeBg.png и http://yourpage.com/index.css должны существовать.

Ответ 2

Если вы хотите заменить фоновое изображение ничем (т.е. сделать его неактивным или "выключить" ), используйте ключевое слово "none" в вашей таблице нисходящего стиля:

 background-image: none;

Ответ 3

Для конкретной страницы вы можете использовать правило css на странице, используя !important. Если вы добавите your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;} в файл, переопределите фон по умолчанию.

Ответ 4

Либо установите фон в правиле CSS с тем же селектором, что и исходное правило, и включите ваш новый файл CSS после первоначального, либо убедитесь, что ваше новое правило имеет селектор, который имеет более высокую специфичность: http://www.w3.org/TR/CSS2/cascade.html#specificity

Наконец, вы можете присвоить фоновому свойству флаг !important, однако это обычно последнее средство и знак плохо организованной таблицы стилей.

Ответ 5

Если фон страницы установлен в теле, вы можете просто отменить его, предоставив телу на этой конкретной странице класс или идентификатор и добавить (также может быть в том же файле css...):

body.someClass {
  background: ...
}

или

body#someID {
  background: ...
}

(в части body действительно не требуется, поскольку класс и id перекрывают селектор)

Ответ 6

У меня была та же проблема.

То, что я закончил, было в моей таблице стилей, которая выполняла переопределение, я применил ее не только к телу, html:

Итак...

#id, html, body { background-color: #FFF }

Надеюсь, это может помочь кому-то.

Ответ 7

в index.css написать

 body { background-image:('homeBg.png') !important;

вы можете переопределить любое свойство, определенное где угодно, написав "! important" после него в новом файле