Работя върху уебсайт, където основната секция на страницата има пълно, фиксирано фоново изображение. Можете да го видите на живо (http://adjemian.projects.hat.eliotberriot.com/biographie/), или както е показано на снимките по-долу:
Нагоре на страницата
Долна част на страницата, след превъртане надолу
Това работи според очакванията на всеки целеви браузър (Chrome, Firefox, Opera), с изключение на IE11, където фоновото изображение изобщо не се показва и се появява втора лента за превъртане:
Същата страница в IE11
Ето какво изглежда (на мен) като подходящото HTML маркиране:
<main id="main" class="site-main has-background" role="main" style="background-image: url(urltomyimage);">
<section class="page-content">
# Page content here
</section>
</main>
И CSS:
main.has-background {
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media only screen{
main.has-background {
padding:15rem 0;
}
}
@media only screen and (min-width:40.063em){
main.has-background {
padding:20rem 0;
}
}
@media only screen and (min-width:64.063em){
main.has-background {
padding:25rem 0;
}
}
@media only screen and (min-width:90.063em){
main.has-background {
padding:30rem 0;
}
}
Както можете да видите, добавям някои подложки отгоре и отдолу, за да оставя повече място за фоновото изображение при по-широки разделителни способности.
За съжаление, нямам реален компютър с Windows с IE11, където да мога да отстранявам грешки на живо. Използвам Browserstack, за да проверя уебсайта си спрямо множество браузъри и ми е доста трудно да използвам инструментите за разработчици на IE11 чрез Browserstack.
Надявам се, че съм дал достатъчно информация, просто ми кажете, ако имате нужда от нещо друго, за да ми помогнете.
Благодаря ти !