Adjust Background Image on only one specific page

[Danceddiction]

I'm trying to make a background image span multiple sections on only one specific page. I was able to do this successfully with the exception of when the screen size changes from a standard desktop size to a wider screen size. 

Below is what it looks like standard: 

Below is what it looks like when it goes into a wider screen:

I was able to achieve this by adding the following codes: 

In theme.liquid

<!-- Aboust Us Background Image -->
{% if request.path contains 'about' %}
<style>
body {
background-image: url("https://cdn.shopify.com/s/files/1/0706/9505/9711/files/Gradient_Background.png") !important;
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}
<!-- About Us Background Image -->

Then I made the background for all sections on this page transparent in the base.css file with similar code below: 

#shopify-section-template--18442698719487__rich_text_nWyUAD .gradient {
  background: transparent !important;
}

I am wondering if this might be limited by the side-margins of each section not being 100%? Anyways any chance someone could help me out? 

Website: www.danceddiction.com/pages/about-us

Password: testword

Thanks!

[Shadab_dev]

The best way I have learnt to give these bg images is using an image tag and then positioning it absolute with respect to the parent section, this way the image does not cut or anything.

[Danceddiction]

Unfortunately my html/css is pretty limited. I got to this point by following along online. I'm not sure exactly what you mean or how to implement it.

[Shadab_dev]

All right. Let me try this first with your store url. Then will go for next possible solution