1

I'm using this code

#main-header::after {
content: "";
background-image: url('xxxx');
background-size:cover;
opacity: 1.0;
top: -45%;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

And I want it work in all pages except in the homepage because I have a fullwidth slider, how can I do it? I'm using this custom CSS on Wordpress. Thanks!!

Jakuya
  • 45
  • 1
  • 2
  • 6
  • In the home page create the custom style to override this. home page: `#main-header::after { /*custom overriding styles */}` – Farzin Kanzi Apr 04 '17 at 10:33
  • home page body must have some unique class. Target this using .home #main-header::after{ override the styles here or display:none} where .home is the class on body tag for home page. – Sahil Dhir Apr 04 '17 at 10:39

2 Answers2

13

You can use class exclude selector using the body class like How to exclude particular class name in CSS selector?

so your code will become: 

body:not(.home) #main-header::after {
content: "";
background-image: url('xxxx');
background-size:cover;
opacity: 1.0;
top: -45%;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Community
  • 1
  • 1
Shivanand Sharma
  • 434
  • 3
  • 13
1
 <?php if(!is_home()){ ?>
<style type="text/css">
#main-header::after {
content: "";
background-image: url('xxxx');
background-size:cover;
opacity: 1.0;
top: -45%;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
</style>
 <?php } ?>
D. Pachauri
  • 244
  • 2
  • 8
  • 4
    Answers are always welcome, but including a brief explanation of *how* the above solves the problem would make it more useful to others. – Leigh Apr 04 '17 at 13:17