Задать вопрос
@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;
}
  • Вопрос задан
  • 262 просмотра
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, тем более такой простой.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Придумать альтернативный логотип к уже существующему
23 дек. 2024, в 07:27
1000 руб./за проект
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Ещё заказы