Angled full width background with wave form?

Problem

Can someone tell me what is the best way to deal with angled background with full width?

I want to create something like this:

Angled background

I tried with the :after selector but it's not working the way I want it to.

.bg {
    background: #000;
}

.bg:after {
    content:"";
    height: 469px;
    background: url("http://i.imgur.com/SqqtkYk.png");
    display: block;
}

JSFiddle

Problem courtesy of: MordFustang

Solution

First you have to give body, html{margin:0;padding:0} and give some position with some width:100%. SEE DEMO.

body, html{margin:0; padding:0;}
.bg {
    background: #000;
}

.bg:after {
    content:"";
    height: 469px;
    position:absolute;
    top:0;
    left:0;
    background: url("http://i.imgur.com/SqqtkYk.png");
    display: block;
    width:100%;
}
Solution courtesy of: Kheema Pandey

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.