Z-index Issue?

• 

  picturesquekeepsakes · Member · Jun 2, 2013 at 2:47 am

  • Copy link
  • Add topic to favorites

  I am using the Vintage Camera theme and have added my own background “camera” image to the site-header section. I have been able to place the camera on top of the content section, but I can’t seem to get the camera placed above the black bar and black ribbon, located at the top of the content section. I am assuming this is a z-index issue. Does anyone have any suggestions as to how to correct this? Here is what I have so far:

  header.site-header {
  width: 100%;
  height: 275px;
  margin-left: 0;
  margin-top: -5px;
  padding: 0;
  position: relative;
  background-image: url(‘http://picturesquekeepsakes.files.wordpress.com/2013/02/header_image.png’);
  background-repeat: no-repeat;
  background-position: 92% 60px;
  z-index: 5;
  }

  .blackbar {
  position: relative;
  z-index: 2;
  margin-top: -12px;
  }

  .ribbon-right {
  position: absolute;
  margin-top: -46px;
  z-index: 2;
  }

  .ribbon-left {
  position: absolute;
  margin-top: -12px;
  z-index: 2;
  }

  #page {
  position: relative;
  background-image: url(‘http://picturesquekeepsakes.files.wordpress.com/2013/02/scene8.png’), url(‘http://picturesquekeepsakes.files.wordpress.com/2013/03/film_5.png’), url(‘http://picturesquekeepsakes.files.wordpress.com/2013/02/film_21.png’);
  background-repeat: no-repeat;
  background-position: 100% 372px, 97% 224px, 95% 485px;
  }

  #masthead hgroup {
  position: relative;
  padding-top: 0;
  }

  .site-title {
  margin-bottom: 0;
  margin-top: -20px;
  }

  .site-title a:hover {
  color: #d602cc!important;
  }

  .divider {
  background-image: none;
  }

  .site-description {
  font-style: italic!important;
  font-family: Trochut, serif!important;
  color: #93ba07;
  margin-top: -15px;
  }

  .entry-title, .entry-title a, .entry-title a:visited {
  color: #570010;
  margin-left: 17px;
  }

  .entry-content {
  color: #570010;
  margin-left: 17px;
  }

  .entry-content ul > li:before {
  content: “”;
  }

  .entry-content > ul {
  list-style: none;
  }

  #content {
  position: relative;
  margin-top: -71px;
  background-color: rgba(252,252,235,.7);
  z-index: 1;
  }

  Thanks in advance!

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

• 

  picturesquekeepsakes · Member · Jun 3, 2013 at 11:23 pm

  • Copy link

  fixed it…