Header Background 100% Page Width

Hi,

I would like to have the header background 100% page width. This can be done easily by using the imageBg page suffix. However, the imageBg suffix also makes the menu bar to look different, and I don't like it.

Anyhow, on the link below I've created a module in the header with background image (not using imageBg). Everything looks fine except for the fact that the background is the width of the template - not the width of the page. How can I make it cover the all width?

https://lionweb.com/new/services

Thank you

Hello,

Please try to add the following code at the end of any CSS file:

Code: Select all

#gkHeaderMod {
max-width: 100%!important;
}

Hi,

Thank you. The background image is now 100%. However, all the text in the module is now wider than the template width (1100px). How can I constrain the text to not exceed the template width?

Thanks again

In this case please revert the previous change, please remove background-image from the module and please set your image as a background image for the following selector:

Code: Select all

#gkHeader

Thank you so much. Your support is amazing!!!

Hey, i saw that this was said:

In this case please revert the previous change, please remove background-image from the module and please set your image as a background image for the following selector:

#gkHeader

But im not really sure what this means, and im having the same issue. Can you advice please?

Hello,

You have to remove the module background-image from the module settings and you have to set the background-image property for the #gkHeader selector in the CSS code.

I'm sorry im not really understanding. What i'm trying to do is set it up so that way i can have multiple pages with images that are full width as the header, but i still need them to be repsonsive like on the homepage. Currently i have these two pages:

www.techgenius.guru as my homepage

and

www.techgenius.guru/locations/monterey.html

I would like to be able to have it look like it is currently, but be responsive on my monterey page, and also work correctly on my homepage.

Any ideas?

Sorry my second URL changed to www.techgenius.guru/locations/monterey- ... epair.html

help please?

@feedbubbler - sorry but I don't understand what do you want to achieve now - for me your page looks correctly.

The homepage header area has a max-width or 100%. It is set like that to work properly for all of my other location pages, but i DONT want the text in the header on the homepage to have a max-width of 100%. I want it to have the max-width of 1260px like the rest of the template.

Please add the following code at the end of any CSS file:

Code: Select all

#gkHeaderMod .custom {
max-width: 1260px;
margin: 0 auto;
}

that ends up changing my location pages as well.

Just to make sure im clear:

all "location" pages need to be a max-width of 100%

and the homepage needs a max-width of 1260px (for the text).

Would it be ok to give you access to the files to change them as needed?

Please change my code to:

Code: Select all

.imageBg #gkHeaderMod .custom {
max-width: 1260px;
margin: 0 auto;
}

You my friend, are genius.

Hello,

You have to remove the module background-image from the module settings and you have to set the background-image property for the #gkHeader selector in the CSS code.

Hi, I just saw this post. I don't understand, I went to my modules and didn't see any module named "background-image". Can you please explain me how can I remove that image and set my own Responsible image?

Thank you,
I will appreciate your answer.

You have to remove background-image image from the Custom HTML module settings and the specify this property in the CSS code.