HTML не обгоняет фоновое изображение

Я хочу изменить фон веб-сайта от обычного цвета до изображения. CSS-индекс:HTML не обгоняет фоновое изображение

.bg { 
    opacity: 5; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 100%; 
    background-image: url('../../assets/pics/bg.jpg'); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
}

Если я пишу

<body class="bg">

в файл HTML, Веб-сайт белый. (Если я добавлю эффекты размытия, они будут показаны над всеми остальными элементами). Если я

<img id="logo" src="path to img">

Это работает, но я хочу его с помощью CSS, потому что его умнее: D Изображение здесь: (из CSS-файла)

../../assets/pics/bg.jpg

И я не получаю никаких ошибок в Chrome (в инструментах разработчика)

Может ли помочь мне?

(Если это поможет, я хочу, чтобы изменить страницу «mcggehrden.de/idesk/v3» и хочу установить аа собственного фона)

источник

2015-09-29 dunklesToast

Почему 'позиция: absolute'? – CodeRomeos

@CodeRomeos Почему бы и нет? (Когда я удаляю его также не работал) – dunklesToast

'opacity: 5'? (0 является прозрачным. 1 непрозрачен.) – ray

Вам нужно что-то вроде этого ?: View Full Size

<div class="container"> 
<div class="row text-center"> 
    <div class="col-md-3 col-md-offset-5"> 
     <h1>MCG Gehrden</h1> 
     <form class="login-form" action="/idesk/v3/login_check" method="post"> 
    <h3><span class="glyphicon glyphicon-user"></span> IServ-Anmeldung</h3> 
     <input class="form-control" type="text" name="_username" value="" placeholder="Account" required="required" autofocus="autofocus"/> 
    <input class="form-control" type="password" name="_password" placeholder="Passwort" required="required" /> 
    <div class="checkbox"> 
    <label><input type="checkbox" id="remember_me" name="_remember_me" /> Angemeldet bleiben</label> 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" type="submit">Anmelden</button> 
</form> 
    </div> 
</div>

CSS:

*{ padding: 0; margin: 0; } 
body { 
color: white; 
background: 
    url(https://mcggehrden.de/idesk/v3/img/logo.png) 100% 60vh no-repeat, 
url(https://mcggehrden.de/idesk/v3/img/circles.png) 0px 100px no-repeat, 
    #244c7f ;   
} 
form{ 
    background-color: white; 
    padding: 20px; 
}

источник

2015-09-29 19:46:52

При добавлении IMG к телу в CSS у вас нет необходимости для указания класса для тега body. В css вы можете прямо сказать тело {.. ваши стили ..}. Затем, вложенные сверху, влево, вправо и снизу говорят прямое поле: 0. Также абсолютная позиция не должна быть там, и непрозрачность 5 не может существовать. Z-индекс 5 ничего не сделал. Мое предложение состоит в том, чтобы установить ширину 100% и высоту авто или высоту, указанную в «px». Попробуйте это и дайте мне знать.

источник

2015-09-29 19:30:07

Нравится: ширина: 100%; высота: авто; – dunklesToast

Не требуется auto, значение px, например. Я не говорю, что это сработает, но в некоторых из моих случаев давно это сработало –

HTML не обгоняет фоновое изображение

ответ

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