Header image doesn't fit for Sparkling theme

Sparkling
1

Hello!

First of all, thank you so much for the great theme! Love it!

I have a tiny question: I used the code you provided to make a sticky header (as a navbar background) and it works well. However, there is one problem: the image doesn’t fit the header place correctly. I tried different dimensions from width 1920px down to 800px (and different heights) but nothing seems to work. Would you know the perfect size for the image/have a clue what sort of code do I need to add to the child theme? So, the place for the header is perfect size wise but the image just doesn’t fit.

Many many thanks!

2

Header image doesn’t suppose to fit from edge to edge and it is used for logo and logo only.

If you want to setup slider just like on our theme demo with large full-width pages you can follow instructions on theme documentation.

Let me know if this helps.

3

Thank you for the quick response!

Sorry I didn’t explain well enough. This is what I have now:

.navbar.navbar-default {
  height: 500px;
  background: url('http://soulspeech.fi/wp-content/uploads/2015/03/testi3.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The idea came from here: https://colorlibsupport.com/t/scaling-header-image-browser-width-sparkling-theme/

So this shouldn’t be really the “official” header image but navbar background.

As said, the code works, the image just doesn’t fit.

But, if you recommend slider, should I try to sticky slider option then…? So the size should be 1920 by 550 pixel. If I try this should I add the code like this to the header.php:

<div class="top-section">
	<?php sparkling_featured_slider(); ?>
	<?php sparkling_call_for_action(); ?>
</div>
<img src="http://www.christiaanbruinink.nl/wp-content/uploads/2014/12/cropped-wp_FSA4370.jpg" alt="Thanks to Colorlib" />

Sorry, I’m not really good with codes :confused:

4

Instead of using some hacky solutions maybe just try to add your image inside header.php right above this line of code:

<header id="masthead" class="site-header" role="banner">

This is how the basic code would look.

<img src="http://cdn4.colorlib.com/sparkling/wp-content/uploads/sites/5/2014/03/colorlib-logo-slider.jpg" alt="Colorlib logo">

Or you can even make it clickable like this:

<a href="http://google.com"><img src="http://cdn4.colorlib.com/sparkling/wp-content/uploads/sites/5/2014/03/colorlib-logo-slider.jpg" alt="Colorlib logo"></a>

This code will point header image to Google but you can change it with your website URL.

5

Aah, works works works. Thank you!