2013-11-07 9 views
0

Из этого сценария я получил ширину и высоту из окна моего браузера. Я хочу установить свой фоновое изображение в html на 100% для thissize. (независимо от размера экрана). И другие элементы (навигационная панель, текст, изображение или svg) должны приспосабливаться к размеру.Размер фона - размер innerhtml

нет -> Я хочу НИКАКОЙ полосу прокрутки, в любое время :)

window.onload = function() 
{ 
    // initale Breite und Höhe des Browserfensters 
    var iWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth); 
    var iHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight); 

    var bWin = document.getElementById('bWin'); 
    bWin.innerHTML = "Fensterbreite " + iWidth + " <br />Fensterhöhe " + iHeight; 
    window.onresize = function (evt) 
    { 
     var width = window.innerWidth || (window.document.documentElement.clientWitdh || window.document.body.clientWidth); 
     var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight); 
     var bWin = document.getElementById('bWin'); 
     bWin.innerHTML = "Aktuelle Breite " + width + " <br />Aktuelle Höhe " + height; 
    } 
} 

ответ

1

не на 100% уверен, что вы просите, но я думаю, что вы пытаетесь растянуть фоновое изображение, чтобы соответствовать ширине/высоте ваш браузер ..... путь, который вы собираетесь выглядит дополнительный комплекс, почему бы вам не попробовать некоторые простые CSS

body,html { width: 100%; height 100%; } 

body { 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     /*ie8 Fix*/ 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
zoom:1; 

} 

это работает броузеры

, чтобы изменить размер элементы страницы (див, Navs и т.д.) Эй и нужно смотреть на CSS медиа запросов и адаптивный дизайн (используя% 's для ширины + высоты), вы должны, вероятно, Google какой-то материал, чтобы прочитать об этом, если вы новичок реагирующих сайтов

Быстрый пример того, как может выглядеть отзывчивый дизайн css со средствами массовой информации

#container { 
width: 900px; 
margin: 0 auto; 
} 
@media (max-width: 900px) { 
#container { 
    width: 100%; 
} 
} 
Смежные вопросы