полный фон с кнопкой

Question

Я пытаюсь создать полный шаблон экрана HTML, как этот образ (в центре страницы) Экран:

в указывающей человека и некоторых других точек, я хочу создать кнопка click ables, но поскольку изображение в полноэкранном режиме и фиксированное положение, кнопка в другом размере экрана получает другую позицию.

мой код для полноэкранного изображения:

html, body ,form 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    min-height:100% 
} 
.fullscreen 
{ 
    z-index: -999; 
    height: 100%; 
    position: fixed; 
    width:auto; 
    padding: 0; 
    margin: 0; 
} 

    <img src="source/fullscreen.jpg" class="fullscreen" /> 

, как решить эту проблему для всех размеров только с помощью CSS экрана? и центральное полноэкранное изображение?

Answer 1

Вы можете установить свойство «margin» - CSS, всех этих кнопок относительно их соответствующих положений.

Answer 2

Ваша проблема центрирования изображения как горизонтально, так и вертикально хорошо документирована в CSS-Tricks:

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Одним из примеров (что близко к тому, что вы хотите, и не имеют недостаток того, чтобы знать размеры изображения в попытке использовать метод):

html { 
    width:100%; 
    height:100%; 
    background:url(http://i.stack.imgur.com/5qSmX.jpg) center center no-repeat; 
} 

который выглядит в действии:

http://jsfiddle.net/ukVNS/

Проконсультируйтесь со ссылкой на другие методы.

Answer 3

Попробуйте это:

* { 
margin: 0; 
} 
body { 
background: url(img); 
height: 100%; 
width: 100%; 
background-size: 100%; 

} 

Не использовать скрипт так:

.fullscreen 
{ 
    z-index: -999; 
    height: 100%; 
    position: fixed; 
    width:auto; 
    padding: 0; 
    margin: 0; 
} 

    <img src="source/fullscreen.jpg" class="fullscreen" /> 

, когда вы хотите установить фон ...