Photoshop Question posted in
The official user guide can be found here.

background image should be in diagonal using css – Photoshop

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search