Задать вопрос
@serebro223
css

Почему internet explorer обрезает края фона при растягивании, как исправить?

Здравствуйте. При растягивании фона по центру, ie обрезает края, в нормальных браузерах это не наблюдается. Подскажите, как исправить (нужно не фиксированное положение фона)?

5c363dd2a8cae703705323.png
<body>
 <div class="window bg"></div>
</body>


.bg {
       background: url(../../assets/images/fons/bg.svg) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.window {
    position: relative;
    width: 95%;
    min-height: 98vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #000000;
    min-width: 1200px;
}
  • Вопрос задан
  • 260 просмотров
16 комментариев
Подписаться 1 Простой 16 комментариев
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Как и говорил, проблема в SVG:
5c36512169f5d850896249.jpeg

Нужно было добавить в тег svg:
width="750.3" height="450" preserveAspectRatio="none slice"


Полный код SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve" width="750.3" height="450" preserveAspectRatio="none slice">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
  <g>
    <g>
      
        <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
        <stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
        <stop  offset="0.1635" style="stop-color:#252C88"/>
        <stop  offset="0.3975" style="stop-color:#1B2167"/>
        <stop  offset="0.621" style="stop-color:#15194F"/>
        <stop  offset="0.8273" style="stop-color:#101540"/>
        <stop  offset="1" style="stop-color:#0F133B"/>
      </radialGradient>
      <rect y="0.3" class="st0" width="750.3" height="450"/>
    </g>
  </g>
</g>
</svg>


Либо же cделать градиент на CSS, тем более такой простой.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Фронт мобильное приложение
25 апр. 2024, в 10:42
150000 руб./за проект
Настроить вёрстку webapp-telegram
25 апр. 2024, в 10:41
2000 руб./за проект
Создать дудл - видео с AI аватаром
25 апр. 2024, в 10:25
2000 руб./за проект
Ещё заказы