Header I Image

Hi,
I've tried everything to get an image to load in place of the header1.jpg and it's not working for me.
The image I've uploaded is there but not displaying.
Any help would be really useful.
Thank you in advance.
Darren.

http://www.johnwest.co.uk.gridhosted.co.uk/
http://www.johnwest.co.uk.gridhosted.co ... eader1.jpg

Hi,
did you tried this:

Code: Select all

#gkHeader {
    background: url("http://www.johnwest.co.uk.gridhosted.co.uk/images/demo/header/header1.jpg") repeat fixed 0 0 / cover #9BA3B8; }

If not, please.
How to use it? Check my footer.

BTW
"johnwest.co.uk.gridhosted.co.uk" - very strange & unique domain name, who will remember dubbed co.uk ? I guess only Google.

Hi Oscar,
No I wouldn't have never have thought of having to use an override for this.
But yes it works so thank you
The url is a temporary one from host while building the site - because yes that would be a ridiculous domain name

Thanks again
D.

Hi Oscar,

I've just noticed that the image isn't responsive now, it's fixed.
Also, how could I alter the size - I'd like to make it 1400px x 480px if its possible, but that's not as important as getting it responsive like the demo version.

Thanks
Darren.

Darren, forget about my last CSS class, delete it ... I spend 30 minutes, and I've found what is wrong.
In Header1 module- must be this code

Code: Select all

<h1 class="gkAnimate active">Hello!<br>My name<br>is John</h1>
<p class="gkAnimate active">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a class="gkScrollDown gkAnimate reverse active" href="#my-works">Scroll Down</a>
<div class="gkHeaderBg active" style="background-image: url(http://www.johnwest.co.uk.gridhosted.co.uk/images/demo/header/header1.jpg);"></div>

Small differences , but now it should work exactly like on demo page.
There was wrong code in my QS and Docs page.

Hi Oscar,
Thank you so much for that. I'm not at desk at the moment but will do that as soon as I get back.
Again
Many thanks
Darren.

About question of height -it was made by paddings , this is default code:

Code: Select all

.gk-header1 {
    overflow: hidden;
    padding: 230px 14% 200px;
}

so if you will reduce those values - the bg image will be smaller.

Many thanks

Welcome, if you need more jobs not typical support use PM.

Hi Oscar,
Thank you - that's working now - I'm not sure the padding is exactly what I had in mind though. Ideally it would be great to have the top banner not so deep. But I'm not sure if that is going to be possible with the responsive function.
What do you think ?
Darren.

Maybe try this:

Code: Select all

.gk-header1 {
    padding: 120px 5% 100px;
}