[Resolved] How to make a header background image responsive

[Author]

Posts

[wayneW]

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.

[Ghennadi]

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.

[wayneW]

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.

[Ghennadi]

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.

[wayneW]

Hi Ghennadi,

That works fine. Thanks for your speedy response.

Wayne