Add A Border To PageHeader Image

Give this CSS a shot:

.single .page-header-image-single {
      border: 20px solid #FFF;
}

Or maybe another thought, I know this doesn't exactly relate to the original purpose of me opening this thread. However, I was thinking maybe like a parallax effect.

This is currently how my website looks: http://sj3.me

You can use a parallax effect if you choose to set the image as a background image through the "Content" tab of the Page Header. In this case, you'll have to add some sort of content to the content textarea, even if it's an empty HTML tag.

You'll also want to use top/bottom padding to add height to the content area.

BTW - McDavid is a beast.

So I'm trying to play around with that, but it takes the image away from the index page.

Do you have the checkbox set to the use the page header on the blog page? If so, uncheck it.

Then add a regular image to the "Featured Image" metabox: https://en.support.wordpress.com/featured-images/

I gave up on that idea, because I would need to make two separate images every time(because the featured image is always different with the height.

So I went back to square one, with the white 20px border. My image is 920px wide. Doing the math, it should add up to my layout width(960px). However, there seems to be a gap: http://sj3.me/sports/edmonton-getting-away-with-robbery/

Try this instead:

.single .page-header-image-single {
    padding: 20px;
    background-color: #FFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Magnificent. That worked beautifully.

Thank you so much, and we will see soon if McDavid really will be the next great one :P

As a hard-core Canucks fan, I really hope he isn't haha