Adjusting size of header background image on tablet

[fasthands]

I have added a background image to my header, but on tablet view it's being cut off on the left and right. I've tried adding custom css to the page but it's not reading it. (I also tried adding it to a new css file, still not working). When I inspect the element it's showing inline styles being applied, and I can't figure out how to overrule them.

Here's what the inspector shows: 

<div class="wsite-section wsite-header-section wsite-section-bg-image" style="height: 764px;background-image: url(&quot;/uploads/1/2/8/0/12801868/background-images/133110811.jpg&quot ;background-repeat: no-repeat ;background-position: 50% 50% ;background-size: 100% ;background-color: transparent ;background-size: cover;">

And the css I tried added (Page > SEO > Header): (thinking that if I change "cover" to "contain" it would shrink down.

<style> @Media screen and (min-width: 768px) and (max-width: 1024px) {

.wsite-section .wsite-header-section .wsite-section-bg-image {height: 300px; background-size: contain !important;}

}
</style>

[MLB1]

I have had the same issue for quite a while now and it always came down to trial and error.

Unfortunately the best solution that I found was to centre the important part of my images to show all that was essential.

I would also like to know the solution to this one.

[fasthands · Accepted solution]

I was able to figure this out on my own.

Here's the code in case it helps someone else:

I put this into the Page > SEO > header section: (Since it only applied to a single page)

<style> @Media screen and (min-width: 768px) and (max-width: 1024px) {

.header-page .wsite-header-section { height: 455px !important;}

}
</style>

I played with the height until my image fit left to right without the text being cut off.

[Adam7]

Thanks for sharing, @fasthands!