Separate background images for pages

• 

  quinndevlinandthebridgestreetkings · Member · May 26, 2017 at 8:14 pm

  • Copy link
  • Add topic to favorites

  How to change the background image on separate pages on my site. I want the home page to have an image as the background and the other pages to just have a color.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 27, 2017 at 1:37 am

  • Copy link

  Hi there, add the following to your custom CSS to delete the image from all but the home page, and set your own background color for all other pages.

  body.custom-background:not(.home), body.custom-background:not(.home) .obsidian-background-overlay {
  	background-image: none;
  	background-color: #aacc99;
  }

• 

  quinndevlinandthebridgestreetkings · Member · May 27, 2017 at 11:55 am

  • Copy link

  thank you! do you know how I can get rid of the space between the menu and and the start of the page as well as the page title on the page. this is for everything except the homescreen.

• 

  thesacredpath · Member · May 27, 2017 at 8:48 pm

  • Copy link

  Great! Add this to tighten up the top spacing and get rid of the page titles on static pages. I’ve also included selectors on the rule for hiding the page titles so that it should not hide them on the blog or single post pages. If you add a blog and posts, and there are any issues, let me know.

  body:not(.home) header#masthead.site-header {
  	min-height: 0;
  	padding-top: 2.5em;
  }
  body:not(.home) .entry-tite, body:not(.blog) .entry-title, body:not(.single) .entry-title {
  	display: none;
  }

• 

  quinndevlinandthebridgestreetkings · Member · May 27, 2017 at 11:33 pm

  • Copy link

  Both of those work great. Although for some reason i still have the headings on my music and film pages? any reason for that?

• 

  thesacredpath · Member · May 28, 2017 at 5:08 am

  • Copy link

  Ah, I missed one. Change the second CSS rule I gave just above to this one.

  body:not(.home) .entry-tite,body:not(.blog) .entry-title,body:not(.single) .entry-title, body:not(.single) .page-title {
  	display:none;
  }