Image for header background

[TWPU]

Hi Guys

 

Are there a way to insert an image on my website header without using a module ?

[endriu107]

Yes you can do this manually by editing files, i think you need edit file global.css adding image as background.

 

Something like that:

 

#header {background: url(../img/image.png);}

[TWPU]

Thanks for the quick reply.

Will try this a bit later today.

[TWPU]

Hi

 

I have added the below code to the global.css file for the header image but the image are displaying to far left.

How can I fix this and how do I make the image change with the website when the zoom size changes?

 

[endriu107]

This is not prestashop issue but css issue, you should look into google css background position http://lmgtfy.com/?q=css+background+position

[vekia]

  On 5/10/2016 at 3:19 PM, TWPU said:

Hi

 

I have added the below code to the global.css file for the header image but the image are displaying to far left.

How can I fix this and how do I make the image change with the website when the zoom size changes?

 

Background.JPG

 

 

how you want to change this image? you mean that you want to make it responsive ? to fit to the screen size?

[TWPU]

Yes, I want the image to be responsive and fit to the header part above the menu bar.

[endriu107]

You can use for example background-size:cover;

[TWPU]

Thanks for the help

My background image is in place and look exactly like I want it.

The only problem is that it does not shrink and grow with the website when you zoom in or out.

How do I fix this?

[endriu107]

Could you share url to your shop?

[TWPU]

www.technowave.co.za

[endriu107]

I'm not sure what you exacly want but I think in line 5734 you could try put this:

 

header {
    z-index: 1;
    position: relative;
    background: #fff;
    background: url(../img/HeaderImage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 15px;
}

[TWPU]

Please see what happens to the  Header Image when you zoom in or out on the website.

It moves completely out of the website header when zooming.

www.technowave.co.za

[endriu107]

Watch how I see your shop and how could it look after small changes:

 

[TWPU]

How do I get the blue image to size with the rest of the site?

[endriu107]

To the correct conteiner just add style background:#0000FF;

[TWPU]

Hi

 

I need to stop the image from moving away from the site when zooming like in the second image.

 

 

[vekia]

it will be really hard to avoid distortion while you will use browser "zoom" feature. Each browser works in a little different way, especially with this zoom feature.

if you will fix it with "fixed" position in chrome, it will stop to work in ffox

[TWPU]

Are there another way to add the image to the header background?

Are there a module that can do this.

Edited May 11, 2016 by TWPU (see edit history)

[TWPU]

Any Ideas or recommendations will be appreciated.

[endriu107]

You alredy have solution in my video, you just need customize your image.

[TWPU]

Thanks

[diseñarte]

 

  On 5/10/2016 at 5:30 PM, endriu107 said:

Watch how I see your shop and how could it look after small changes:

 

 

Expand  

thanks, this solve one of my problems with header-bg. Now i have another, can i put a different header-bg in each category, product or cms page

Code or module just want to solve this problem that gives me headaches

thanks

Edited October 26, 2018 by diseñarte (see edit history)