full-width header image?

Hi. I’ve just upgraded my blog (http://booktothefuture.com.au/) to Sparkle, and I really love the theme, but I’m wondering if there’s a way for me to use a full-width image as the header? The current header puts black bars either side of my image.

I’m not exactly an advanced WordPress user, so I’m not sure if there’s something really obvious that I’m missing. I appreciate any help I can get. Thanks!

First of all your image is way too small to be used as full-width image as it will be stretched.

But the basic idea would be like this:

nav.navbar.navbar-default {
    background: url('http://booktothefuture.com.au/wp-content/uploads/2014/09/bannerii-v2.jpg');
    background-size:cover;
    height: 383px;
}

Add this code to Theme Options - Other - Custom CSS.

Of course, make sure to remove your currently added image.

Another alternative would be to use Slider just like we have in theme demo.

Hi Algars. Thanks for your help. What header dimensions do you recommend? I’ve tried adding a larger header, but have problems with it not scaling to suit the window width, or chopping off the bottom of the image…or both.