Wich css code do i need to put a (behind posts) background on Hatch Theme?

• 

  sigmapersei · Member · Apr 19, 2014 at 4:37 pm

  • Copy link
  • Add topic to favorites

  Hello!

  i wanted to put a background on Hatch theme but it seems that you can only put one behind the block front page (if i choose a black background i only see black tiny columns on sides) like if the contents where on another layer

  So i wanna know if there is a css code to put a background on the front block layer so this way my background will be seen behind the title, menu and posts?

  thanks!!

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

• 

  joelymil · Member · Apr 19, 2014 at 11:30 pm

  • Copy link

  If you’re able to set the main background (what you described as the columns on either side) in one of the customize tools I would first set that to the color you want.

  If that’s not working, I believe adding this code to your CSS should work:

  body.custom-background {
  	background-color: #000000;
  }

  Then, to set the section behind your menu, content, etc., try this:

  .custom-background #page {
  	background: #000000;
  }

  I used the hex-code #000000 (black) just as an example – obviously, use whatever color you choose. Just be sure to use the same color code for both steps, if you want it too look like it’s all one layer.

  One other thing you might run into is that it looks like your blog logo is an image with a white background. If you want the space behind your logo text to be the same as the background, you’ll have to redo that image.

  ‘Hope this helps! (I’m not 100% sure, so let me know if it works! lol)

• 

  sigmapersei · Member · Apr 20, 2014 at 12:11 am

  • Copy link

  Yes it works! thank you so much! also i wanted to know, is it a way to download an image instead of a color?

  And another question (sorry) is it possible to reduce the space between the top posts and the logo?
  i already put this code:

  #masthead {
  margin-bottom: 0;
  }

  it reduced the space a little bit but a 1cm (0,40inch) upper will be perfect!

  Thanks!

• 

  joelymil · Member · Apr 20, 2014 at 5:33 am

  • Copy link

  Let me first correct something slightly from before.

  With the Hatch theme, you should be able to set a background color or image from the “Appearance>Customize” section of the admin, so you shouldn’t need to use the first bit of code I suggested.

  From there, change the second CSS rule to:

  .custom-background #page {
  	background: none;
  }

  This should make it so you can control your entire background with the built-in customize tools, including using an image if you want.

  As for the issue with your masthead, the easiest way is probably just to add a height property to your existing #masthead rule and play around with the pixel values until it looks how you want it. So it would look something like this:

  #masthead {
       height: 200px;
       margin-bottom: 0;
  }

  And change the ‘200’ value to whatever you want.

  Give it a shot!

• 

  sigmapersei · Member · Apr 20, 2014 at 8:06 am

  • Copy link

  thank you so much, that’s absolutely perfect!!

• 

  joelymil · Member · Apr 20, 2014 at 4:21 pm

  • Copy link

  Happy to help!