jem3299

Oh, one more thing. You probably should try to use one image and resize that for each. My client didn’t like the way hers resized and wanted different variations of the image instead.

I just added in several breakpoints using @media and had them point to different bg images for each size browser. Many of these are for specific devices the client wanted me to target. So you’ll probably have to tweak it a bit for your own situation.

In your child theme in styles.css, I added this to the bottom. Hope it helps ??

@media screen and (max-width: 1366px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 769px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header1300.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 1280px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 666px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header1200.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

 /*Windows Surface Pro*/
@media only screen and (max-width: 1080px) and (orientation : portrait) {
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 551px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header992.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 992px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 551px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header992.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 768px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 427px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header768.jpg')!important; }
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
    }

@media screen and (max-width: 600px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 334px!important; }
body.custom-background {background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header600.jpg')!important;}
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 480px){
.chronosly-closure {margin-top: 1px!important;}
div.home-header-wrap {height: 230px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header480.jpg')!important;}
.rb_logo {display:none!important;}
.navbar-brand {width: 225px!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

/**  iphone 6 **/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { .chronosly-closure {margin-top: 1px!important;}
div.home-header-wrap {height: 294px!important; }
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/04/header-imge-1x2.jpg')!important;background-size: 100% auto!important;}
.rb_logo {display:none!important;}
.navbar-brand {width: 225px!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}

@media screen and (max-width: 320px){
.chronosly-closure {margin-top: 1px!important;}
div.header-content-wrap {height: 178px!important; }
.navbar-brand {width: 175px!important;}
body.custom-background {background-position: 0px 100px!important;background-color: #000000!important;background-image: url('https://www.menabrinno.com/wp-content/uploads/2016/03/header320.jpg')!important;}
.rb_logo {display:none!important;}
a.btn:nth-child(1),a.btn:nth-child(2) {display:none!important;}
}