Hod do I add a background image to Header wrapper ...

[shags38]

v1.5.5f westminster_new responsive template

Purpose is to have a large background image (filling the header wrapper) and such that the site logo and any navigation tab sits on top of that background image.

I have searched this forum for help to add a background image to fill the header wrapper and have not found a simple complete solution - lots of maybe this, try that etc and most posts are years old. I have also searched for and found some css code (w3schools) for applying a background image - the problem being not knowing which files need to be modified to ensure the image is placed where required and that it loads correctly on all screens.

The posts I found in different threads indicated individually modifying different files including stylesheet.css and some code in the header.php and something in a javascript as well in some with no positive outcome responded back by the questioner(s) that a particular solution worked ....

unfortunately I didn't find one post that said, OK, follow steps a,b c and d indicating all changes that are required.

So any assistance would be greatly appreciated.

cheers, Mike

[DrByte]

You didn't post a URL, so one can only offer hypotheses without going and finding and downloading and installing that template ... which is a lot to ask. Much easier to just point to a specific site.

Taking a guess, I looked at your Harmony site.
You've got a 100% width white-background top-wrapper and top-middle div, both inside the #headerWrapper div. Those two 100%-width divs obscure any changes made to your #headerWrapper div.
If those 100% width weren't 100%, and/or didn't have white-backgrounds then setting #headerWrapper {background-color: green} in the stylesheet would allow a green background to pass through. (starting with a bg color first before requiring any specific image; concept is the same)

So, I'm guessing that whatever other unsatisfactory advice you said was offered previously was maybe actually totally right, but you have other things that are sitting on top and taking precedence over the other changes?

In short, to make the #headerWrapper have a background image/color you'd set the CSS for it as I mentioned above.
And then position other things as needed, making sure to not have other divs totally obscuring whatever is behind them.

Using the browser's inspection tools lets you identify which files are affected for which screen sizes, and to test the changes in real-time. Thus the value of you sharing an actual URL in your post.

Unfortunately your post doesn't give anything actionable to go on in order to help guide you past whatever you ended up with after following whatever unmentioned unsatisfying advice you tried.

[DrByte]

Also, your huge logo.webp file doesn't work on all browsers, thus leaving a completely useless massive blank above-the-fold experience:

[shags38]

Firstly thanks for your speedy response and the heads up regarding the .webp logo, much appreciated - I will revert to previous .png

Secondly maybe I didn't explain myself fully - I haven't sought advice / posted on this topic previously, I was referring to searches I did within the forums to try to find a correct method to implement a background image without simply just posting .... however I do appreciate your input about the 100% widths and having other divs obscuring others. I will rectify these.

So here is some code I have found online for inclusion in the stylesheet.css - is this suitable for Zen-Cart application?

#headerWrapper {background: url(..includes/images/image.png) no-repeat; background-position: 100%; background-size: cover; opacity: 0.6;}

and is this inserted in /*bof wrappers - page or section containers*/ in stylesheet.css ??

obviously includes/templates/westminster_new/images/logo.png would have to be changeo to a small typical log stye and size if sitting over the background image?

cheers,

Mike

[davewest]

Firstly thanks for your speedy response and the heads up regarding the .webp logo, much appreciated - I will revert to previous .png

Secondly maybe I didn't explain myself fully - I haven't sought advice / posted on this topic previously, I was referring to searches I did within the forums to try to find a correct method to implement a background image without simply just posting .... however I do appreciate your input about the 100% widths and having other divs obscuring others. I will rectify these.

So here is some code I have found online for inclusion in the stylesheet.css - is this suitable for Zen-Cart application?

#headerWrapper {background: url(..includes/images/image.png) no-repeat; background-position: 100%; background-size: cover; opacity: 0.6;}

and is this inserted in /*bof wrappers - page or section containers*/ in stylesheet.css ??

obviously includes/templates/westminster_new/images/logo.png would have to be changeo to a small typical log stye and size if sitting over the background image?

cheers,

Mike

Personally, I like using

background-position: center; background-size: contain, cover;

centers and keeps the image responsive and not distorted. I also use my own stylesheet when adding such things so upgrading is easy and it helps with css rules... so bottom of stylesheet.css or stylesheet_MYTEMPLATE.css Also opacity is for anything displayed above the background, not the background image..

[shags38]

Personally, I like using

background-position: center; background-size: contain, cover;

centers and keeps the image responsive and not distorted. I also use my own stylesheet when adding such things so upgrading is easy and it helps with css rules... so bottom of stylesheet.css or stylesheet_MYTEMPLATE.css Also opacity is for anything displayed above the background, not the background image..

Many thanks for the response Dave and the good advice. So what is calling the image? do I still need to include the url of the image like this?

#headerWrapper {background: url(../images/image.png) background-position: center; background-size: contain, cover;

Obviously I am not good with CSS and templates :)

cheers, Mike

[davewest]

Many thanks for the response Dave and the good advice. So what is calling the image? do I still need to include the url of the image like this?

#headerWrapper {background: url(../images/image.png) background-position: center; background-size: contain, cover;

Obviously I am not good with CSS and templates :)

cheers, Mike

The only change was to the size and position... your full code

#headerWrapper {background: url(../images/image.png) no-repeat; background-position: center; background-size: contain, cover; opacity: 0.6;}

[shags38]

The only change was to the size and position... your full code

#headerWrapper {background: url(../images/image.png) no-repeat; background-position: center; background-size: contain, cover; opacity: 0.6;}

Many thanks Dave .... much appreciated.

cheers,
Mike