Поместите изображение в верхнем правом углу веб-страницы

Question

Я хотел бы поместить некоторое изображение в начало и вправо текста ... Я сделал пример в Photoshop, чтобы вы могли видеть, что я имел в виду ...

Image example

Я использую тему WordPress, и я не могу понять, как поместить это изображение в правом верхнем углу ... да, я искать в Google, но я не найти подходящее решение.

Я попытался как фоновое изображение DIV, но изображение не может выйти за пределы одного DIV ...

Я попытался положить IMG тег, но он толкает текст влево ... но Мне нужен текст, чтобы просмотреть изображение, чтобы создать желаемый эффект.

Спасибо заранее.

Answer 1

Это то, что я сделал:

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

Answer 2

добавить в CSS

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

Fiddle

Answer 3

Добавить класс к изображению .toprightcorner т.е. {положение: абсолютный; верх: 0; право: 0; } после применения css. Надеюсь, это сработает. Если не дайте мне знать.