Header and slider image-background size contain

fatimashaz
(@fatimashaz)

1 year ago
Hi Kharis,

Could you please help me display my header image as “contain ” i put the background-size:contain; in inspect element and it looks perfect then i tried to put this css

.header-image {
background-size: contain;} through customizer on website but its not working i also checked this thread https://wordpress.org/support/topic/how-to-get-full-control-over-header-image-display/ .
can you please guide me how can i achieve this for my all pages ? the css i found for this page https://kitchentek.com.au/kitchen-renovations-sydney/

element.style {
1. background-image: url(https://kitchentek.com.au/wp-content/uploads/2025/04/Hero-Banner-1-1920×1080-1.jpg);
2. padding: 70px 55px;
3. background-position: 50% 48px;
4. margin-left: -55px;
5. margin-right: -55px;
}
and i want to add background-size:contain;

kindly guide me will be really appreciated

regards

Fatima

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

A. M. Riffaz
(@riffaz)

1 year ago

Hi Fatima,

Add this CSS to Appearance > Customize > Additional CSS

#pg-9555-0 .panel-row-style-for-9555-0 { background-size: contain; }

This will work only in this page main banner section https://kitchentek.com.au/kitchen-renovations-sydney/

Regards,
Thread Starter fatimashaz
(@fatimashaz)

1 year ago
Thanks for your help this code did worked but created a big white space on left i need to apply it here

element.style {
1. background-image: url(https://kitchentek.com.au/wp-content/uploads/2025/04/Hero-Banner-1-1920×1080-1.jpg);
2. padding: 70px 45.5px;
3. background-position: 50% 48px;
4. margin-left: -45.5px;
5. margin-right: -45.5px;
6. <here need to apply the code image size:contain;> } just i dont know what to write for element style
A. M. Riffaz
(@riffaz)

1 year ago

Hi,

In that case, you can use the following:

element.style { background-image: url(https://kitchentek.com.au/wp-content/uploads/2025/04/Hero-Banner-1-1920×1080-1.jpg); padding: 70px 45.5px; background-position: 50% 48px; margin-left: -45.5px; margin-right: -45.5px; background-size: contain; }

I hope, you know what to replace with element.style

Thread Starter fatimashaz
(@fatimashaz)

1 year ago

Thanks Riffaz for your help. this is where i am stuck at i dont know if its a silly question but i am totally blank for what to what to replace with element.style . If you could please guide me will be a big help.

Regards
Fatima

Thread Starter fatimashaz
(@fatimashaz)

1 year ago

Hi Riffaz could you please guide me about how i can find the element.style to replace with. help really appreciated

Regards

Fatima

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Header and slider image-background size contain’ is closed to new replies.

Tags