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

Position image in top right corner of a web page – Photoshop

I would like to put some image to the top and right of the text… I made an example in Photoshop so you may see what I had in mind….

Image example

I am using a WordPress theme, and I cannot figure out how to place this image to the top right corner… yes, I did search the google but I didnt find any suitable solution.

I tried as a background image of a div, but the image cannot go beyond the confines of a div…

I tried putting img tag, but it pushes the text to the left … but I need the text to go over the image to create the desired effect

Thank you in advance.

Tags:

4

Answers


  1. 0

    add in css

    body{
background-image:url("your image path");
background-position: right top;
background-repeat:no-repeat;background-attachment:fixed;
}

    Fiddle

    Login or Signup to reply.
  2. 0

    Add class to the image i.e
    .toprightcorner{ position:absolute; top:0; right:0; }
    after applying the css . Hope it works out. If n’t let me know.

    Login or Signup to reply.
  3. 0

    This is what I did:

    img {
    width: 400px;
    height: 400px;
    position: absolute;
    right:0;
    top:0;
}
div {
    position: absolute;
    left: 0;
    top: 150px;
    background-color: white;
    width: 80%;
}

    Here is the JSFiddle demo

    Login or Signup to reply.
  4. 0 
    .example {
  height: 100px;
  width: 100px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  top: 20px;
}
    <div class="example">
  <p>Text example</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search