Почему фоновое изображение не отображается полностью?

Question

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

Вот мой код

.button-bar { 
    padding:3% 20% 3% 20%; 
}  
#wrapper{ 
    background-image: url(/login); 
} 

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

увидеть это

.headerTitle{ 
    margin-left:2%; 
    margin-top:2%; 
} 

Answer 1

Ваш CSS делает именно то, что вы говорите, что делать ....

#wrapper только что маленький скользят, показывающий с фоном. Если вы хотите, чтобы занять весь использование .ionic-scroll страницы в вашем CSS вместо #wrapper

Смотрите картинки:

http://screencast.com/t/l1ptRRNaDs

Попробуйте заменить #wrapper в вашем CSS с .button-bar, а затем попробовать .ionic-scroll и посмотреть результаты

.ionic-scroll { 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
} 

Если вы хотите полное изображение, чтобы увидеть внутри #wrapper и вы знаете высоту изображения вы ок п установить #wrapper ширину и высоту примерно так:

#wrapper{ 
    height: 1000px; 
    width: 1000px; 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
} 

Если вы не знаете, высоту и ширину изображения, я хотел бы предложить, используя <img> тег внутри #wrapper вместо ... Это заставит #wrapper приспособиться к Размер изображения

Answer 2

Потому что элемент с фоном только высок, как элементы внутри него. Таким образом, в вашей обертке есть только h4-элемент с X количеством пикселей в высоту, поэтому обертка также составляет X пикселей.

Попробуйте добавить минимальную высоту в свою обертку и посмотрите, что фона следует. Как это:

#wrapper{ 
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
min-height: 250px; 
} 

https://jsfiddle.net/0tnjznt5/

Answer 3

Попробуйте с этим:

.button-bar { 
    padding:3% 20% 3% 20%; 
}  
#wrapper{ 
     background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"); 
    min-height: 500px; 
}