Разный фон для каждой страницы?

Я пытаюсь найти самый простой способ дать каждой странице (от моего NavBar) на моем сайте «другой» фото-фон. Кажется, что когда выбран фон, он остается постоянным для всех последующих страниц.Разный фон для каждой страницы?

У меня есть Главная, О нас и ссылки на меня в моем NavBar. Моя цель состоит в том, чтобы иметь один фото-фон, когда посетители нажимают на мою домашнюю страницу, другой фото-фон, когда нажимают на О странице, третий фото-фон, когда они нажимают на мою страницу контактов и т. Д.

Есть ли простой способ сделать это?

Вот мой код до сих пор:

<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

Мой CSS выглядит следующим образом:

body {background-image:url(greentea.jpg);}

источник

2013-05-20 C. Felipe

сделать встроенные таблицы стилей для всех страниц – underscore

Я был бы осторожен в отношении слишком большого количества фоновых фотографий: он может выглядеть красиво, но ничего не делает, чтобы сделать сайт более удобным в использовании. –

Одним из простых способов было бы назвать фоновые файлы одинаковыми как ваша страница и используя один скрипт JavaScript, чтобы делать это для вас каждый раз. – hjpotter92

Вы можете назначить класс тела, как

для домашней страницы

<body class="home">

около нас страница

<body class="about">

вы можете использовать CSS

body.home{background-image:url(greentea.jpg);} 
body.about{background-image:url(greentea.jpg);}

источник

2013-05-20 09:56:33 edd

Awesome! Большое спасибо! Я считаю, что это решает мою проблему, я просто должен ее протестировать. –

Я выбираю ID, потому что у вас не будет другой страницы или другой домашней страницы. Здесь только один. Classnames лучше для

Вы можете пойти в любом случае, но иногда вам может потребоваться идентификатор тела для какого-либо javascript-дерьма, поэтому лучше оставаться на безопасной стороне. – edd

Путь я выбираю, чтобы сделать это, чтобы назначить другой класс на <body> элемента в зависимости на текущей странице.

Таким образом, вы можете использовать CSS для таргетинга на каждую страницу со свойствами, специфичными для страницы, такими как фон в ремонте.

Большинство CMS вы можете просто использовать идентификатор страницы (будь то пуля, идентификатор узла или даже санированный путь).

источник

2013-05-20 09:53:59 hexblot

думаю это может сработать.Итак, если я назначу другой класс в элементе на каждой из моих страниц («Главная», «О нас», «Контакт»), я могу добавить все эти классы в свою таблицу стилей, и он должен работать нормально. Я прав? –

вы просто добавили бы что-то вроде 'body.page1 {/ * Styles here * /}', и ваши целевые потомки, например 'body.page1 .someclass' – hexblot

Дайте каждому тегу уникальный идентификатор страницы. В нашем приложении мы используем ruby on rails, так что это id = "<% = controller-view%>" вид архитектуры.

Если ваш сайт является статическим, просто введите код в ID.

<body id="about">

Тогда в CSS

body#about {background...}

источник

2013-05-20 09:55:05

Используйте CSS строку, которая у вас есть уже (body {background-image:url(greentea.jpg);}) на каждой странице в это <head><style></style></head> теги и просто изменить фоновое изображение на каждой странице. Имейте в виду, что рекомендуется иметь отдельный файл CSS, чтобы избежать какого-либо встроенного стиля.

источник

2013-05-20 09:56:44 heinkasner

Разный фон для каждой страницы?

ответ

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