Images Not Displaying In Header
Tony
Hi,
I'm using the Helix Ultimate template and have continually had issues displaying an image in the header. I was once given this custom css to add:
header { background-image: url("images/header320"); }
This works 'on occasion', but not this time! 🤷 https://jumbuckmotorinn.com.au/
Can anyone please advise what I'm doing wrong?
Mehtaz Afsana Borsha
Accepted AnswerHi
Try this CSS
#sp-header{
background-image: url(jumbuckmotorinn.com.au/images/header320.jpg) !important
}Tony
Accepted AnswerHi Mehtaz,
This image is supposed to be sitting behind the menu in the header (it was originally). I have viewed it in several browsers and it is just displaying a white background with just the logo visible?
Can you please provide a screen shot of what you are seeing?
Many thanks, Tony.
Martin
Accepted AnswerHi Tony,
take the following code:
#sp-header {
background-image: url('/images/header320.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}Tony
Accepted AnswerSorry Martin, that doesn't seem to work either!!! The original code WAS working... here's a snapshot from November last year taken with WayBackMachine. That was the last time anyone had toched the site 🤷
Martin
Accepted AnswerCould you please provide the exact image path?
Because there is no image at this link: https://jumbuckmotorinn.com.au/images/header320.jpg
It's just the link; I just tested it :D https://prnt.sc/PdUixpUF4eTP
Tony
Accepted AnswerSorry Martin, the file extention dropped off! https://jumbuckmotorinn.com.au/images/header320.jpg Many thanks for looking into this for me.
Tony
Accepted AnswerSolved!!! Thank you so much Mehtaz :) Best wishes, Tony
Martin
Accepted AnswerHi Tony,
You're missing a no-repeat attribute, because your image is repeating. ;) If you also center it vertically, you'll always see the same view, which is why I suggested a slightly more detailed code snippet.