CODEWITHSUNDEEP
htmlcss
Volkan
Volkan

Reputation: 546

Position image in top right corner of a web page

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.

Upvotes: 1

Views: 14481

Answers (4)

Riaz
Riaz

Reputation: 13

.example {
  height: 100px;
  width: 100px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  top: 20px;
}
<div class="example">
  <p>Text example</p>
</div>

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

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

Upvotes: 2

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

add in css

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

Fiddle

Upvotes: 2

Suresh
Suresh

Reputation: 923

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.

Upvotes: 0

Related Questions