фиксация изображения, чтобы он не двигался в зависимости от разрешения экрана?

Question

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

У меня есть изображение человека, закрепленного на фоне моего макета tumblr (мой tumblr is tsuzami.tumblr.com), и он выглядит так на моем разрешении экрана 1366 x 768; http://oi39.tinypic.com/5x0f1g.jpg

, но при предварительном просмотре на экране, используя различные разрешения экрана, человек находится в неудобном месте, которое, очевидно, выглядит глупо; http://oi44.tinypic.com/f2yab.jpg

Как заблокировать эту фотографию в том же месте, где я намеревался, чтобы это было независимо от разрешения? Это код, который я использую для изображения;

<div style="position:fixed; top: 0px; left:-140px; z-index:-2;"><img src="http://i43.tinypic.com/j7ca2u.png"></div> 

Я понимаю, что я тупой хорошо, пожалуйста, не кричите на меня

Answer 1

Трудно избежать этого, поскольку площадь содержание 500px в ширину, и как экран становится более узким (даже на рабочем столе) содержимое начнет покрывать изображение. Я был бы более склонен обернуть всю страницу в div контейнера и поместить изображение в качестве фона на это, а затем установить минимальную ширину в контейнере. Проще всего было бы удалить, что DIV изображения у вас есть в данный момент и просто добавить эти стили к body элемента:

body { 
background: url(http://i43.tinypic.com/j7ca2u.png) no-repeat -250px 0; 
min-width: 1200px; 
} 

Однако, я не слишком увлечен о настройке мин ширины на body элемента, так желательно добавить эти стили выше в div, который обтекает всю вашу страницу.