How do I get the background image to responsively fit all browsers?

B Powell
asked 10 years ago

What custom css would I need to include to get the landing page background image to fit all browsers and devices for this site http://republic.gallery? It doesn’t matter if the external edges are cropped as long as the image is full height – many thanks
I’m currently using this – It works fine for chrome but i can’t get the image to cover full height in firefox and internet explorer
<style>
.body {
background: url(img/header-bg.jpg) fixed no-repeat top center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
</style>

1 Answers

DominicStaff
answered 10 years ago

To resolve this issue, you can add the following code to the Header Code:

<style>
.body { 
    background-size: 100% auto;
}
</style>

Regards,

B Powell
replied 10 years ago

Thanks – in the end I customised the style.css directly – seemed to work as good?? thanks for the support