Я хочу, чтобы у div был динамический c фон, заданный PHP. Поэтому я использую атрибут стиля div для определения фона, размера фона, положения фона и повторения фона. В Chrome и Firefox все отображается правильно, но Edge не показывает изображение.
Здесь результирующее html:
<div class="series-info-container" style="background: linear-gradient(to right, #1B2431E5, #1B2431E5), url('....png'); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="series-info-inner">
<img alt="" src="....png">
<div class="series-info">
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
Имеется в виду div-series- info- conatiner
Здесь css для этого фрагмента:
main .series-info-container {
margin: 0;
padding: 0;
width: 100%;
height: 500px;
}
main .series-info-container .series-info-inner {
margin: 0 auto;
padding: 50px 0;
width: 1300px;
height: 100%;
display: flex;
align-items: flex-start;
}
main .series-info-container .series-info-inner img {
margin: 0;
padding: 0;
width: auto;
height: 400px;
border-radius: 5px;
display: inline-block;
}
main .series-info-container .series-info-inner .series-info {
margin: 0 0 0 40px;
padding: 0;
width: 100%;
height: calc(100% - 50px);
display: inline-block;
}
main .series-info-container .series-info-inner .series-info h1 {
margin: 20px 0 0 0;
padding: 0;
font-family: 'Open Sans','Helvetica Neue', helvetica, arial, sans-serif;
font-size: 22px;
font-style: normal;
font-variant: normal;
font-weight: 600;
color: #ffffff;
display: inline-block;
}
main .series-info-container .series-info-inner .series-info p {
margin: 20px 0 0 0;
padding: 0;
max-height: 325px;
overflow: hidden;
font-family: 'Open Sans','Helvetica Neue', helvetica, arial, sans-serif;
font-size: 1rem;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 25px;
color: #97a7c0;
display: inline-block;
}
Есть идеи?