Hello again

The client has asked me to drop an image into the header wrap area.
I've just experimented, setting the background to transparent, and then trying to link the image using:
#headerwrap
{background-image: url("www.leadbetters.co.uk/newsite/images/LondonSkylineEngland.png")};
But nothing happens.

j3/responsive template
www.leadbetters.co.uk/newsite/

What am I doing wrong?
Thanks
Ian

Oops - sorry, I've updated that:

#headerwrap .zencontainer
{
background-image: url("www.leadbetters.co.uk/newsite/images/LondonSkylineEngland.png");
background-color: rgb (0, 0, 0);
}

Still not working

Thanks

Ian

Hi Ian,

The div name is spelt wrong its

#headerwrap .zen-container {background-image: url("www.leadbetters.co.uk/newsite/images/LondonSkylineEngland.png");background-color: rgb (0, 0, 0);}

e.g its .zen-container and not .zencontainer

Hi Paul - right - I've fixed the hyphen, established that the css is OK, and that the path to the image is correct, but still no background image.

I think the background is still set to white higher up in the css, so I put this at the bottom thinking it would override the commands above it.

I'm reluctant to tweak all the css too much in case I have to put it back, and forget how.

Having said that, I suppose I could always copy and paste it somewhere safe…

Any thoughts?

Thanks

Ian

Hi Ian,

Its showing the path as wrong so try adding the image here

www.leadbetters.co.uk/newsite/templates/responsive/images/hls-small.png

So it matches

#headerwrap .zen-container {
background-image: url("../images/hls-small.png");
}

And drop the

background-color: rgb (0, 0, 0);}

instead use a hex value instead of rgb

So use #000

instead of

rgb

Ah. Black background, no picture.

How did you see that the path was wrong?

This is what I now have:
#headerwrap .zen-container
{
background-image: url("www.leadbetters.co.uk/newsite/templates/responsive/images/hls-small.png");
background-color: #000;
}

I'm away for a few days as from tomorrow, so I'll give you some peace soon

Thanks

Ian

Here's the link: www.leadbetters.co.uk/newsite/index.php/shop-page

This is the path the browser is trying to find the pic in

www.leadbetters.co.uk/newsite/templates/responsive/css/www.leadbetters.co.uk/newsite/templates/responsive/images/hls-small.png

Hmm - tried transparent, but still no pic...

so instead try the relative link I suggested in the css and make sure the image is in folder as indicated by me

don't use an absolute url its being redirected use a relative url in the css

This bit

Its showing the path as wrong so try adding the image here

www.leadbetters.co.uk/newsite/templates/responsive/images/hls-small.png

So it matches

#headerwrap .zen-container {
background-image: url("../images/hls-small.png");
}

add this replacing previous

#headerwrap .zen-container {
background-image: url("../images/hls-small.png");
}

Got there!
Sorry, I was rushing and not reading carefully enough.
I'll find a better image and knock it back a bit.
And sorry again - there's still more.
What can I do about the white ears on either side of the image?
I've tried putting the blue background back, but I'm doing that wrong.
The image is actually 1500px wide, so I expected it to go right the way across - not that that's necessarily what I want. I'd rather get rid of the white ears.
When I inspect the element I can see only header wrap.
Any ideas?
Thanks
Ian

Not quite sure what you mean by white ears?

Are you adding the image to the right div?

try instead

#headerwrap

Cheers
Paul

Excellent - thanks Paul. I can now get the image to go right across - I'll need to sort out image size and repeat etc, but I can do that.

Looking at the site now: www.leadbetters.co.uk/newsite/

There's a white square left and right of the header image. Is there any way we can get that to go blue, like the rest of the background?

Thanks again

Ian

Hi Ian,

I think you are referring to the headerwrap area as mentioned above

#headerwrap

So you just need that same blue colour added as a background colour

Cheers
Paul