Scaling the header image to browser width (Sparkling theme)

chris · December 24, 2014, 3:26pm

Dear Aigars,

I would like to start a blog website using your Sparkling theme because of its beautiful and minimalist design! The website is almost done after tweaking the CSS code of the theme, but I am experiencing two problems in setting my header image:

the image is not fitting the browser width (like in the demo theme)
the image is not shown completely (original image is 1916px by 600px, but is 1500px by 380px after scaling and cropping)

I have been searching the support forum to find a solution. So far I know that the solution is to add some theme-specific code in Theme Options - Custom CSS. Could you please have a look into my website and tell me the code to solve my problems with the heater image?

Thanks in advance and keep up the good work!

Best regards,

Chris

aigars-silkalns · December 24, 2014, 3:29pm

You are using Custom Header image which is fine too but it is used for logo and some smaller images in the header. For demo website we are using Features Slider which is completely different thing from Custom header that you are using now. For more information about features slider, please start by looking into theme documentation. If it doesn’t help please let me know what where did you get stuck and I will try to help you from there.

shamrock13 · December 29, 2014, 12:16am

but is there a way that somebody can add a jpg/png image that will cover the whole width of the page?

thanx in advance

aigars-silkalns · December 29, 2014, 6:51am

There is many ways how you can do it.

First would be to use background image for navigation area. The basic idea would be like this:

.navbar.navbar-default {
  height: 400px;
  background: url('http://www.christiaanbruinink.nl/wp-content/uploads/2014/12/cropped-wp_FSA4370.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Other options would be to add it as slider image (recommended) vai blog post. For more help see theme documentation.
Other options would be to use any image inside slider but to create it via HTML. This is a great options if you don’t want to use regular posts inside slider. Here is discussion about it but it is for different theme but it will work for Sparkling theme as well.
You can add event static image to replace slider. You can add it directly inside header.php file right above or below this code (placement will make no difference):

<div class="top-section">
	<?php sparkling_featured_slider(); ?>
	<?php sparkling_call_for_action(); ?>
</div>

A simple image tag would be enough for that task, just make sure to upload your image and replace my example URL.

<img src="http://www.christiaanbruinink.nl/wp-content/uploads/2014/12/cropped-wp_FSA4370.jpg" alt="Thanks to Colorlib">

There are many more ways how you can use full width image but if none of methods mentioned above works for you then I can’t help you with that. I have already provided enough information on this problem.

shamrock13 · December 29, 2014, 1:09pm

Thanx for the reply Aigars.
However, the solutions you offered me and i could try didn’t work. The 1st one (nav.bar image didn’t look good at all, so i gave it up. The slider recommendation didn’t work beacure the slider never appeared on my blog although i followed very faithfully the documentations advice!!! With the 3rd and the 4th recommendations, the problem is that i don’t have full access to my blogs files and i can change and add things just through the themes options -> other (custom css). I send you the url so maybe you can understand a bit better what i need. In case nothing works, what code i could use so the grey area left and right of my header image could much the main body background colour.

PS: if i’m not becoming very tyring, how can i have my navigation menu alligned on the left instead of the right?

http://musaferat.espivblogs.net/

aigars-silkalns · December 29, 2014, 9:30pm

Ok, then you can make transparent background for your image and use gradient background via Theme Options - Custom CSS. Here is code that used the same color codes that you have for your image background.

nav.navbar.navbar-default {
  background: #280150; /* Old browsers */
  background: -moz-linear-gradient(left,  #280150 0%, #680139 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#280150), color-stop(100%,#680139)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #280150 0%,#680139 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #280150 0%,#680139 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #280150 0%,#680139 100%); /* IE10+ */
  background: linear-gradient(to right,  #280150 0%,#680139 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#280150', endColorstr='#680139',GradientType=1 ); /* IE6-9 */
}

Aligning menu itself is very easy and you can do it like this

.nav.navbar-nav {
  float: left;
}

shamrock13 · December 29, 2014, 10:19pm

Thank u very much Aigars. the alligment menu code worked perfectly and now i’m working on the colouring of the header to see what i finally prefer. just for checking, is there a way that i can have the normal page’s colour on the right and left of my header image and on the same time keeping my navigation menu in its grey area. i’m sure i saw a sparkling blog like this one of the previous dayz but i didn’t keep the bookmark and now it’s hard to show you

Apart from these problems i’m having on the designing of my blog, all the rest look perfect. thanx a lot for offering the theme and the help you provide

aigars-silkalns · December 30, 2014, 8:18am

Right now menu and header image is in the same block. While it looks that header is on top of menu it is still the same thing - one block.

If you would have access to theme files you could place your header image above navigation menu completely but right now it is the best solution you can get if you don’t have access to edit files.

To make the most out of what you have, just edit your header image via Photoshop or other graphic editor and remove its current background and it will look good and everything will mix together nicely.

aigars-silkalns · December 30, 2014, 8:31am

Here is a quick example how it would look with some Photoshop. I think it would look great

shamrock13 · December 30, 2014, 8:03pm

i ended up using your advice for the transparent image. thanx a lot for the great help you gave me aigars. keep up the good work and enjoy the new years eve tomorrow…

aigars-silkalns · December 30, 2014, 8:17pm

I think it looks great now!

Happy New Year!

chris · December 30, 2014, 8:56pm

Thank you for your answer! I will look into the documentation of the features slider!

Sorry for posting a new topic on this issue today. I couldn’t find this topic back in the support forum and didn’t get any notications of follow-up replies by email. Could you remove my topic of today from the support forum?

chris · December 30, 2014, 10:49pm

Option 4 - static header image to replace slider - works like a charm! Thank you so much for your fast response and support Aigars, I wish you all the best in 2015!

See you on Twitter!

luis · February 7, 2015, 6:38pm

Hi Aigars!

I used your advice to replace slider with a static image like this:

You can add event static image to replace slider. You can add it directly inside header.php file right above or below this code (placement will make no difference):

<div class="top-section">
	<?php sparkling_featured_slider(); ?>
	<?php sparkling_call_for_action(); ?>
</div>

A simple image tag would be enough for that task, just make sure to upload your image and replace my example URL.

<img src="http://www.christiaanbruinink.nl/wp-content/uploads/2014/12/cropped-wp_FSA4370.jpg" alt="Thanks to Colorlib" />

But now how can i use this just in homepage? I don’t want the static image to appear in every single page and post…

Thankx for your precious help

aigars-silkalns · February 9, 2015, 12:02pm

@Luis

You can wrap your image with with conditional formatting that will output necessary code only on front page. Here is an example:

<?php

if ( is_front_page() || is_home() ) {
	echo '<img src="http://www.christiaanbruinink.nl/wp-content/uploads/2014/12/wp_FSA4370.jpg" alt="Thanks to Colorlib" />';
}

?>

Let me know if this helps.

luis · February 9, 2015, 1:50pm

It worked perfectly!

Thank you again for your quick and outstanding support

Next time i’ll need a premium wordpress theme, i’ll choose or advise one of yours!

mg869 · February 28, 2015, 5:32pm

Hello

I used your advice to replace slider with a static image, but I want a menu to be below this header image and I would like this static image to be scaled acordingly to browsers resolution.

Thank you

aigars-silkalns · March 4, 2015, 1:48pm

@mg869

Please post your website URL and I will look into what you have done so far, so I know how I can help you with this.

mg869 · March 4, 2015, 7:06pm

Hello

This is my URL staremiastolublin.pl

aigars-silkalns · March 5, 2015, 4:43pm

@mg869

Your menu is already below Custom Header Menu and it does respond to screen size (it is responsive). However, the only thing that you are missing is that you have cropped your image when uploaded. Make sure to use full size image instead. When you select Custom header image you have a option to Skip Cropping and publish image as is. I guess that’s option you are looking for.

Let me know if this helps.