Static full-size image?

• 

  shanmcf · Member · Mar 31, 2011 at 3:40 am

  • Copy link
  • Add topic to favorites

  How can I make a full-size static image at the top of my blog page?

  I’ve tried:
  – Header image, which is too narrow for my photo and I only want the photo on the front page.
  – Sticky post, which would work except that it still has a date and title on the side.
  – Static page, same problem as the sticky.

  I’d like the image to be full-size without a posted title and date on the side. I’m not particular about whether it’s a static page or just a static image about the posts. I have the Wu Wei theme and CSS customization (although I’m not an expert so more detailed explanation is helpful).

  Thanks!

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

• 

  thesacredpath · Member · Mar 31, 2011 at 4:15 am

  • Copy link

  Need a link to the image you are wanting to use. If you have not uploaded it to the media library, do so and then give us a link to it.

• 

  shanmcf · Member · Mar 31, 2011 at 4:38 am

  • Copy link

  It’s here.

  

• 

  thesacredpath · Member · Mar 31, 2011 at 5:20 am

  • Copy link

  Give this a try. It moves the content down and puts the image above the content. This will make (should make) the image appear on all site pages.

  .center-column {
  background: url("http://shannonmcfarland.files.wordpress.com/2011/03/butterfly3.jpg") no-repeat scroll 0 150px transparent;
  }
  
  .center-column .hentry, .center-column .page {
  margin-top: 43.5em;
  }

• 

  thesacredpath · Member · Mar 31, 2011 at 5:22 am

  • Copy link

  Actually, change the first bit to this so that the image centers.

  .center-column {
      background: url("http://shannonmcfarland.files.wordpress.com/2011/03/butterfly3.jpg") no-repeat scroll center 150px transparent;
  }

• 

  thesacredpath · Member · Mar 31, 2011 at 5:45 am

  • Copy link

  If you want the image to be the same width as the content area, you need to make the image 700px wide, upload it to the media library and then use that URL instead of the one in the code I gave you above.

• 

  shanmcf · Member · Mar 31, 2011 at 7:10 am

  • Copy link

  Thanks! That looks like it’s exactly what I needed. :)

• 

  shanmcf · Member · Mar 31, 2011 at 7:40 am

  • Copy link

  Ok, I did change the dimensions of the image so it is centered much better. But after fiddling with it for a while, regardless of what I do, it either adds a large space between all of the posts or puts the image behind the top post.

  I’m clearly doing something wrong, how can I get rid of those spaces?

• 

  thesacredpath · Member · Mar 31, 2011 at 7:44 am

  • Copy link

  OK, since you have resized the image, we have to adjust the margin-top value to move the content up. Change it as follows and see what you think.

  .center-column .hentry, .center-column .page {
  margin-top: 24.5em;
  }

• 

  shanmcf · Member · Mar 31, 2011 at 7:56 am

  • Copy link

  There is something I’m missing, each post still has a block of space after it, the same size as the header. How can I eliminate those spaces?

• 

  thesacredpath · Member · Mar 31, 2011 at 8:33 am

  • Copy link

  OK, I messed up. Take out what I had given you and add this instead and see what happens.

  #header {
  background: url("http://shannonmcfarland.files.wordpress.com/2011/03/dpp_0001.jpg") no-repeat scroll center 150px transparent;
  height: 395px;
  }

• 

  shanmcf · Member · Mar 31, 2011 at 3:35 pm

  • Copy link

  Thank you thank you, that’s perfect!

• 

  thesacredpath · Member · Mar 31, 2011 at 4:55 pm

  • Copy link

  You are welcome.