CSS changes for one page only


I want to hide the header image on the page http://propertynelson.site/index.php/page/
but keep it on the rest on the page

I know this is easily done with css but Im not entirely sure! I have created a custom page template just in case this helps out


Hello there,

Each page has an unique ID number which can be found when you edit the page. In the address bar of your web browser, you’ll see something like:


To CSS on a specific page, you can use the unique body class name recognized by its ID number which looks like this:


So, to hide the header image, you’ll use the below CSS code:

.page-id-720 .header-image {
  display: none;

.page-id-720 .site-header {
  background-color: rgba(0,0,0,0.9);

@media only screen and (min-width:1025px) {
  .page-id-720 .page-wrap {
    padding-top: 210px;

To apply it to your site, add it into Appearance > Customize > Additional CSS.


Thanks Kharis this worked perfectly.

One last question

I want to create a Siteorogin Hero and I want it to be 100% width and height on a desktop but responsive on a smartphone (100% width but 30% height)

How do I do this?

Hello there,

I am sorry, since your question doesn’t relate with the topic you initially wrote, please separate your other question into a new topic. By doing so, you’ll help us to keep our support forum well archived and easier to browse by other users who might have similar question.