Question 1876 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WooCommerce add background in css is broken – WordPress

I’m trying to set a background for certain categories/pages. I use the following css code. It actually works. But the background is displayed on all pages. I want it to be displayed only on certain pages.

How do I get this solved?

#content {
    background: url(IMAGE URL) repeat center bottom fixed !important;
    background-size: cover !important
}

Unfortunately, I can’t find anything on the Internet. What could fix my problem?

Tags:

3

Answers


  1. 0

    Your css selector currently matches all HTML elements with the id "content". If you use this id for multiple elements (which could lead to problems if you use javascript to access these elements by id), then the styles will apply to all those elements. In order to fix this, use a class instead and only add that class to elements you want the style to apply to.

    Sample:

    .class-to-modify {
  color: red;
}
    <div id="something"class="class-to-modify">My style was modified</div>
<div id="something else">Mine was not</div>
    Login or Signup to reply.
  2. 0

    Look at the classes of the <body> tag in HTML view of your browser. WordPress adds a unique class for every post, called postid-xxx, e.g.postid-231.

    So if you want your CSS only applied for pages/posts with e.g. ID 5 and 150, write

    .postid-5 #content, .postid-150 #content{
    background: url(IMAGE URL) repeat center bottom fixed !important;background-size: cover !important
}

    Some other ways to find the post ID without looking at the HTML source can be found on https://www.hostinger.com/tutorials/wordpress-post-id

    Login or Signup to reply.
  3. 0

    Using body classes can be a solution. Unless any plugin or theme override it. Please see the reference here:

    WordPress body classes

    For examples, you want to add the background on the post pages, you can change your CSS to:

    .single #content {
background: 
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}

    or for specific post

    .postid-{$your_postid} #content {
background: 
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search