Пълно фоново изображение, работещо в Chrome, Opera, Firefox, IE9 и 10, но не и в IE11

Работя върху уебсайт, където основната секция на страницата има пълно, фиксирано фоново изображение. Можете да го видите на живо (http://adjemian.projects.hat.eliotberriot.com/biographie/), или както е показано на снимките по-долу:

Най-горе на страницатаНагоре на страницата

Долу на страницата, след превъртане надолуДолна част на страницата, след превъртане надолу

Това работи според очакванията на всеки целеви браузър (Chrome, Firefox, Opera), с изключение на IE11, където фоновото изображение изобщо не се показва и се появява втора лента за превъртане:

Същата страница в 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.

Надявам се, че съм дал достатъчно информация, просто ми кажете, ако имате нужда от нещо друго, за да ми помогнете.

Благодаря ти !


person Agate    schedule 19.09.2014    source източник


Отговори (1)


Опитайте да добавите !important към стила на елемента, защото обикновено трябва да се изобрази добре.

<main id="main" class="site-main has-background" role="main" style="background-image: url(urltomyimage) !important;">
person Krogertek    schedule 19.09.2014
comment
Благодаря ви за отговора, но добавянето на !important не решава проблема ми. - person Agate; 19.09.2014