Vertically Center Background Image

• 

  knoxvillealliance · Member · Oct 13, 2014 at 5:45 pm

  • Copy link
  • Add topic to favorites

  Hi there,
  I want to make the home page on my site have this background image centered vertically, but i don’t want this on my other pages.
  I would like the top of the image to be aligned with the bottom of the menu. Ideally, the parts that aren’t the image (above and below the image) will be white.

  Thanks for your help.

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

• 

  thesacredpath · Member · Oct 13, 2014 at 7:41 pm

  • Copy link

  This will be tricky with McKinley since it is a responsive width theme that adjusts to work on all screens from the largest desktop monitor to a phone. If you narrow and widen your browser window you will see that the top blue section is not a constant height and gets taller at narrow widths. In addition, the placement of the image will change by the width of the top admin bar depending on whether someone is logged in or not, so trying to align the image with a specific element would be tricky.

  You can add the following to your custom CSS (I used your existing background image, tiled in the “x” direction for demo purposes. Save the CSS and then view your site while logged in and then again while logged out. The CSS aligns it with the bottom of the menu when logged in.

  body.home.custom-background {
      background: url("//knoxvillepublicartscommittee.files.wordpress.com/2014/10/knoxvillejpeg.jpg") repeat-x scroll 0 288px;
  }