@ingeniero

Как задать фоновое изображение конкретной страницы сайта при помощи style.css?

Привет!
Сайт на WP. Дочерняя тема. Правки вносятся через style.css дочерней.

Подскажите новичку, как задать фоновое изобр. конкретной страницы сайта при помощи style.css?
Дело в том, что если по умолчанию задавать какие-то директивы в это файл, то изменения затрагивают только главную страницу. Задача же состоит в добавлении фона на другую страницу.
Нагуглил, что задать фоновое изобр. снизу страницы слева можно так:

body {
background: #000 url("image.jpg") no-repeat fixed left bottom;
}

Вопрос, как сделать это на отличной от главной странице?
  • Вопрос задан
  • 2701 просмотр
Решения вопроса 1
У вас для каждой страницы в body добавляется класс этой страницы, например <body class="page-15">что соответствует странице с ID = 15, прописываете в style.css:
body.page-15 {background:url(ссылка на изображение);}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
для внутренних страниц для body задай класс к примеру .inner-page а потом bg вешай по этому классу
к примеру отредактировав header.php в шаблоне примерно так:
<?php if ( is_home() ) : ?>
	<body <?php body_class(); ?>>
<?php else : ?>
	<body <?php body_class('inner-page'); ?>
<?php endif; ?>>

а если тебе нужно сделать bg только на какой то одной странице сайта, то добавляй filter:
add_filter('body_class', 'add_body_class');
function add_body_class($classes){
	if ( is_single(62) )  //62 - id страницы.
		$classes[] = 'inner-page';
    return $classes;
}

p.s. и не слушай тех кто предлагает это делать через js на фронтенде
Ответ написан
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Как вариант в шаблон вкинь ) Перед закрывающим body
<script>
   let hostUrl = window.location.href;
    if(hostUrl == 'http://твой_сайт.ru/'/*Здесь в зависимости от настройки apach для главной http://твой_сайт.ru/, http://твой_сайт.ru/index.html или  http://твой_сайт.ru/index.php вставь */){
        document.body.style.background = "#000 url(\"путь к картинке для главной\") no-repeat fixed left bottom";
    }else{
        document.body.style.background = "#000 url(\"путь к картинке для других страниц\") no-repeat fixed left bottom";
    }
</script>
Ответ написан
Комментировать
mrusklon
@mrusklon
Не получается? Яростно гугли!
если совсем совсем нет желания лезть в html , я бы лучше сделал на js , но самый простой вариант сделать доп. шаблон , а в него мудрить что угодно

я имею введу
<?php
/*
Template Name: Мой шаблон страницы
*/
?>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы