Non-responsive image header

Good morning, Following the update of the “blueStreet” theme, my background image was deleted. I created it using CSS:

Hi

Thanks for contacting to us.

To make image header image responsive add the below css code inside the appearance >> customizer >> additional css box.

@media only screen and (max-width: 479px) and (min-width: 200px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 52px 0;} } @media only screen and (max-width: 820px) and (min-width: 480px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 98px 0;} } @media only screen and (max-width: 1100px) and (min-width: 821px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 128px 0;} }

Let us know if you have any confusion.

Thanks

Webriti Support Team

• This reply was modified 10 months, 3 weeks ago by radhika1992.

Hello

Thanks for you quick response.

I added the command lines in the additional CSS but I only have a very small part of the image at the top left. My image is 1599×380 pi 183k.

How to get the whole picture.

Thanks

Here my CSS

.page-mycarousel {

background: url(https://www.aeroclubdubocage.fr/wp-content/uploads/2024/01/page-header-pr-page-daccueil.jpg)!important;

padding:180px 0;

}

.page-mycarousel img {
display: none;
}
@media only screen and (max-width: 479px) and (min-width: 200px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 52px 0;} } @media only screen and (max-width: 820px) and (min-width: 480px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 98px 0;} } @media only screen and (max-width: 1100px) and (min-width: 821px){ .navbar3.navbar-inverse { position: relative; } body .page-mycarousel {padding: 128px 0;} }

HI

Also add the below css code inside the additional css box.

@media (max-width: 1100px){ body .page-mycarousel { background-size: cover !important; }}

For your information We have managed the header image feature in much better way in our pro theme as you need. If you want further you can use.

Feel free to contact us for further assistance.

Thanks & Regards

Webriti support Team

Hello

Wonderful it’s works, thank you very much !

Thanks & Regards

sptefire85

Hi

We are glad to know that it has been resolved.

If you like our theme and support, please give rate us here.

Feel free to contact us for further assistance.

Thanks& Regards

Webriti Support

• This reply was modified 10 months, 3 weeks ago by Akhilesh.
• This reply was modified 10 months, 3 weeks ago by Akhilesh.