Cant get SVG to scale properly

Question

Trying to add an svg file and have it scale from one end of the page to the other overlapping two divs (please see mock up image below)

Here is the page JSFIDDLE

Here is the code in particular:

HTML:

<!-- Sectional Blue Background -->
  <div id="blueSection">

  </div>

<!-- /Sectional Blue Background -->

CSS

    /* Blue Sectional 3 Steps */
#blueSection {
position: relative;
transform:scale(3, 4);
-webkit-transform:scale(3, 4);
-ms-transform: scale(3, 4);
right: 80em;
}

#blueSection::before {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -80px;
left: 0;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;

}



#blueSection::after {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -63px;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari */
    transform: rotate(5deg);
}

So what's happening right now is in full screen desktop mode, its right where I'd like it to be, however it extends all the way past the margins of the page. When you resize the screen it doesn't look at all the same its a completely different size. In mobile on chrome it's doesn't appear at all (havent tried other browsers). And in IE on desktop it's as if no edits were done to the blue section at all.

I'm really not sure what I'm doing wrong, if I need to use javascript/jquery or just css I don't mind going either route, I just want to learn how to fix this. I've looked at various articles and I can't see what I'm doing wrong.

All suggestions are greatly appreciated! Thank you for your time!

Answer 1

Try background-size: cover for both before and after elements.