background image should be in diagonal using css

Problem

I am working on my portfolio. I have the Image in the body I want the image should be in diagonal using only css / css3 / Jquery Not by editing through photoshop I have tried using transform rotate for the body.

But I am not getting the result.

Here I have fiddle Link

Here is the css code for that

.fullimg{
    background:url('http://i.imgur.com/swudrIP.png') no-repeat fixed center;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    position:absolute;
}

I want my output should look like below css class name

.diagonal{
    background:url('http://i.imgur.com/ugmhC7w.png?1') no-repeat fixed center;
    width: 100%;
    height: 100%;
    position:absolute;
}

Regards Mahadevan

Problem courtesy of: Mahadevan Sivasubramanian

Solution

You need to use a psuedo-element for this if you wish to apply it to the body, as opposed to using a child element such as a div.

.fullimg:before {
    content:"";
    position: absolute;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    background-image:url(http://i.imgur.com/swudrIP.png);
}

Link to the jsFiddle

Solution courtesy of: Ohgodwhy

Discussion

It seems you are trying to rotate the 'body' in the fiddle. As far as I know, that's not possible.
Try putting the background to a div tag covering the entire body, and rotate it.
Plus, don't forget to add -ms-transform and transform for cross browser compatibility.

Discussion courtesy of: T90

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