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

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

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

Где проблема?

Заранее спасибо.

HTML

<html> 

<head> 

</head> 

<body> 

<div id="main"> 
    <!--Here i have multiple sections--> 
</div> 
</body> 
</html>

CSS

#main { 
    position: relative; 
} 
#main:before { 
    content : ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url(../..//images/3.jpg) center center fixed; 
    width: 100%; 
    height: 100%; 
    opacity : 0.2; 
filter: alpha(opacity=20); 
    z-index: -1;

источник

2016-07-28 bc110402307 Syed Zeeshan Haide

Хотите добавить фоновое изображение в DIV или перед DIV? –

Я хочу добавить фоновое изображение в полном объеме на мою страницу или все мое содержание должно быть отображено на картинке –

Вы имеете в виду на половину экрана, или что вы можете видеть только половину изображения –

попробуйте этот код

background-size:100% 100%;

источник

2016-07-28 06:42:01

Я уже пробовал. –

корпус { margin: 0px; ширина: 100%; высота: 100%; } #main { background-image: url ('download.jpg'); ширина: 100%; высота: 100%; размер фона: 100% 100%; background-repeat: no-repeat; } –

попробовать это один

background-image: url(path-to-file/img.jpg); 
background-repeat:no-repeat; 
background-position: center center;

источник

2016-07-28 06:43:53 sms

background-image: url (путь к файлу/img.jpg); background-position: center center; .... У меня уже есть эти строки кода в моем вопросе. см. Еще раз –

их нет –

см. Это ... фон: url (../..// images/3.jpg) центр зафиксирован; –

Привет, вы только попробуйте со следующими CSS фрагментами

background: url(../..//images/3.jpg); 
background-repeat:no-repeat; 
background-size:contain;

источник

2016-07-28 06:45:23 Sridhar

не работает дорогой –

background- размер: обложка; его покрытие весь блок с изображением без сжатия; если вы не видите полное изображение, используйте background-contains. – Sridhar

Я пробовал это ........ :( –

Я думаю, вы пропустили двойные кавычки при написании ID.

<html> 
<head> 
</head> 
<body> 
<div id="main"> 
<!--Here i have multiple sections--> 
</div> 
</body> 
</html>

источник

2016-07-28 06:49:16 nam

Проблема была в вопросе, а не в фактическом коде –

нет, это было пропущено ошибка ... см. мой отредактированный код –

Этот метод будет работать

body 
{ 
margin:0px; 

width: 100%; 
    height: 100%; 

} 
#main { 
    background-image: url('download.jpg'); 
    width: 100%; 
    height: 100%; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
}

источник

2016-07-28 07:05:44

Здесь вы используете psudeo элемент: прежде, чем функциональность .The от psudeo элемента: перед следующим образом. Он будет прикреплять дочерний узел к первому указателю. В вашем случае вы пытаетесь прикрепить изображение перед элементом div. И это не соответствует всему вашему телу.

Чтобы сделать изображение, применимое ко всему вашему телу, попробуйте следующее:

body 
{ 
margin:0px; 
width: 100%; 
height: 100%; 
background: url(../..//images/3.jpg) repeat left top; 
}

И удалить psudeo элемент: перед тем

#main { 
    position: relative; 
    /*Other CSS Properties*/ 
}

источник

2016-07-28 07:19:21

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

ответ

Смежные вопросы