Skip Navigation

[Résolu] How to make a header background image responsive

Ce fil est résolu. Voici une description du problème et la solution proposée.

We want the header of the site to have a responsive background image. For this, we use the “background-size:cover” CSS property. To ensure cross-browser compatibility, we also add versions of this property for specific browsers, for example “-webkit-background-size:cover”.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 réponses, has 2 voix.

Last updated by wayneW Il y a 7 années et 5 mois.

Assigned support staff: Ghennadi.

Auteur
Publications
#218794

I am experimenting with Bootstrap and noticed when I put a background image in the header, it is not responsive, and there doesn't seem to be any way to make it responsive. What am I missing?

Or,is it better to simply put an image in the header and, if I want to put some interactive icons in the header, just overlay them on top of the image using z-index?

As I'm just feeling my way around Bootstrap, I appreciate any advice.

#218838

Dear wayneW,

Can you provide more info where and how you set background?

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

#218871

Thanks for responding.

I set the background-image property in my child theme style.css, targeting the #header id in header.php. The image displays fine, but isn't responsive and won't obey background-size: cover setting. This isn't a big deal, as I can just use an img to cover the entire header space, then lay a few interactive icons over top of it, but since I"m new to the toolset, I thought I'd ask if there is a better way.

#218873

Dear wayneW,

You can try something like this:

#header{
background-repeat:no-repeat !important;
-webkit-background-size:cover !important;
-moz-background-size:cover !important;
-o-background-size:cover !important;
background-size:cover !important;
background-position:center !important;
}

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

#219060

Hi Ghennadi,

That works fine. Thanks for your speedy response.

Wayne