- This topic has 2 replies, 2 voices, and was last updated 11 years, 5 months ago by
.
-
Posts
-
I would like my Pages to have different background images like this website: http://www.surroundslandscaping.com/patio-design-retaining-walls-walkways-mclean-va/
The only way I could figure out how to create a page background image was to use this css code:
.site-container {
background:url('http://www.gudlandscaping.com/wp-content/uploads/2014/11/1430363_170698405.jpg') no-repeat center top fixed #dddddd
}
.full-width-content .content {
background-color: #ffffff;
opacity: .85;
margin-top: -40px;
margin-bottom: 10px;
padding:35px 045px;
width:100%;
}But that makes the same background image for all pages.
I tried background plugins, but they didn't work.
For the website I referred to above, they use the following css code to make different images on different pages:
.page-id-1167 {
-webkit-background-size:cover;
background:url(http://www.surroundslandscaping.com/wp-content/themes/parallax-pro/images/page-bg-7.jpg) 50% 50% / cover no-repeat fixed;
}
.page-id-37, .page-id-46, .page-id-52, .page-id-87, .page-id-90, .page-id-583, .page-id-621 {
background:url(http://www.surroundslandscaping.com/wp-content/themes/parallax-pro/images/page-bg.jpg) 50% 50% / cover no-repeat fixed;
}
.page-id-213, .page-id-860, .page-id-847, .page-id-872, .page-id-223, .page-id-226, .page-id-246 {
-webkit-background-size:cover;
background:url(http://www.surroundslandscaping.com/wp-content/themes/parallax-pro/images/page-bg-2.jpg) 50% 0 / cover no-repeat fixed;
}And I found this html code they used:
<body class="page page-id-90 page-template-default custom-header header-image full-width-content" itemscope="itemscope" itemtype="http://schema.org/WebPage" data-pinterest-extension-installed="cr1.35" cz-shortcut-listen="true">
<div class="site-container">I know how to figure out what my page id is, and how to add the custom css, but how do I connect the page-id's? Do I need to do something in the function.php file?
Thanks for your help!
http://gudlandscaping.com/accessThere are 2 ways to do this:
1 - Use the page-id number as in your example. To find that look in the source code at the top of each of your pages and it will tell you the page-id-#2 - Give each page a different body class. To add a body class on each page go to Layout Settings underneath the text editor box and enter a body class for each page. If the layout settings are not visible go to the Screen Options tab at the top right and check Layout Settings.
Style just as they have done by either using the page-id or the body class .whatever
.page-id-28 .site-container{
etc
OR
body.mypage .site-container{
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.