Изображение для топ бордера

Question

введите сюда кодУ меня есть контейнер, на верх этого контейнера в виде рамки мне нужно вставить изображение не меняя его основной стиль, я пытался вставить через border-top и background-image: но не работает. Я залил svg файл в гугл диск https://drive.google.com/file/d/17nm5BnTcg5WjDlgW1oNIkG8J2vlxKda4/view?usp=share_link https://i.imgur.com/alQlaCS.png

.container {
    padding-top: 3%;
        padding-left: 5%;
        padding-right: 3%;
        width: 800px; height: 95vh;
        font: bold 16px/1.3em sans-serif;
    
        color: #f1d476;
        box-sizing: border-box;
        
        
        resize: both;
        
    
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
    
    
    }
    .container::before,
    .container::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%; z-index: -1;
      width: 100%; height: 100%;
      transform: translate(-50%, -50%);
    }
    .container::before {
      background-image: linear-gradient(#745225, #281d0b);
      clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
    }
    .container::after {
      background-image: linear-gradient(#4c300e, #090601);
      clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) calc(100% - 14px), calc(100% - 14px) calc(100% - 2px), 14px calc(100% - 2px), 2px calc(100% - 14px), 2px 14px);
    }

 <div class="container">
                    <section>
                        <div class="image-top"></div>
                        <div class="logo"><img src="img/maintance-logo.png" alt=""><div class="logo-text"> <p >INTERNATIONAL CYBER CUP</br> </p> <p class="logo-text-2">TOP WORD GAMING</p></div></div>
                      <div class="work">
                        <p >Ведутся технические работы. Сайт скоро заработает.<br>
                            Больше информации в группе <a href="https://vk.com/iccupcom">vk.com/iccupcom</a>

                        </p>
                      </div>
                      <div class="twit">
                        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">New <a href="https://twitter.com/hashtag/DotA?src=hash&amp;ref_src=twsrc%5Etfw">#DotA</a> Season 54 will start on March 3rd. This season&#39;s maintenance and core infrastructure update will take longer than usual, so please be patient! We&#39;ll let you know as soon as you can play on <a href="https://twitter.com/hashtag/iCCup?src=hash&amp;ref_src=twsrc%5Etfw">#iCCup</a>!</p>&mdash; iCCup.com (@iCCupcom) <a href="https://twitter.com/iCCupcom/status/1630983890780160003?ref_src=twsrc%5Etfw">March 1, 2023</a></blockquote>
                    </div>
                    </section>
                  </div>
              </div>

Answer 1

Вместо "background:orange;" просто вставьте вашу картинку.

.container {
  margin-top: 30px;
  width: 400px;
  height: 80vh;
  font: bold 16px/1.3em sans-serif;
  color: #f1d476;
  box-sizing: border-box;
  background: #c00;
  position: relative;
}

.image-top {
  display: block;
  width: 100%;
  height: 30px;
  background: orange;
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}

<div class="container">
  <div class="image-top"></div>
</div>

Answer 2

мне нужно вставить изображение не меняя его основной стиль

Поскольку самого "родителя" перекрывают оба псевдо элемента, я добавил еще одного "ребенка", который будет показывать картинку поверх всех элементов...

Так же добавил стилей и родителю (см.в конце его стилей). По предоставленному УРЛ, картинка несколько кособокая, т.ч. и в примере она не особо смотрится...

Вот такое решение могу предложить.

.container {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 3%;
  padding-bottom: 3%;
  width: 800px;
  height: auto;
  font: bold 16px/1.3em sans-serif;
  color: #f1d476;
  box-sizing: border-box;
  /* For example only */
  resize: both;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  overflow: hidden;
}

.container::before,
.container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.container::before {
  background-image: linear-gradient(#745225, #281d0b);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

.container::after {
  background-image: linear-gradient(#4c300e, #090601);
  clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) calc(100% - 14px), calc(100% - 14px) calc(100% - 2px), 14px calc(100% - 2px), 2px calc(100% - 14px), 2px 14px);
}

.container :first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  z-index: 3;
  background-image: url("https://i.imgur.com/alQlaCS.png");
  background-repeat: no-repeat;
  /*background-position-x: center;*/
}

<div class='container'>
  <div></div>
  <p>
    У меня есть контейнер, на верх этого контейнера в виде рамки мне нужно вставить
    изображение не меняя его основной стиль, я пытался вставить через border-top и 
    background-image: но не работает.
  </p>
</div>

Answer 3

Раз у Вас уже есть элемент для верхней картинки, то задаём ему размеры, позицию и ставим фоном изображение:

.container {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 3%;
  width: 800px;
  height: 95vh;
  font: bold 16px/1.3em sans-serif;
  color: #f1d476;
  box-sizing: border-box;
  resize: both;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container::before,
.container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.container::before {
  background-image: linear-gradient(#745225, #281d0b);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

.container::after {
  background-image: linear-gradient(#4c300e, #090601);
  clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) calc(100% - 14px), calc(100% - 14px) calc(100% - 2px), 14px calc(100% - 2px), 2px calc(100% - 14px), 2px 14px);
}

.image-top {
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: 9px;
  width: 100%;
  transform: translatex(-50%);
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='775' height='9' viewBox='0 0 775 9' fill='none'%3E%3Cpath d='M377.5 0L355.5 0.5L361.5 9H385.5L377.5 0Z' fill='url(%23paint0_linear_829_982)'/%3E%3Cpath d='M397 0L419 0.5L413 9H389L397 0Z' fill='url(%23paint1_linear_829_982)'/%3E%3Cpath d='M353.5 0.5L323.5 1L329.5 9H359.5L353.5 0.5Z' fill='url(%23paint2_linear_829_982)'/%3E%3Cpath d='M421 0.5L451 1L445 9H415L421 0.5Z' fill='url(%23paint3_linear_829_982)'/%3E%3Cpath d='M321.5 1H292.5L297.5 9H327.5L321.5 1Z' fill='url(%23paint4_linear_829_982)'/%3E%3Cpath d='M453 1H482L477 9H447L453 1Z' fill='url(%23paint5_linear_829_982)'/%3E%3Cpath d='M290.5 1H260.5L265.5 9H295.5L290.5 1Z' fill='url(%23paint6_linear_829_982)'/%3E%3Cpath d='M484 1H514L509 9H479L484 1Z' fill='url(%23paint7_linear_829_982)'/%3E%3Cpath d='M258.5 1L228.5 1.5L233.5 9H263.5L258.5 1Z' fill='url(%23paint8_linear_829_982)'/%3E%3Cpath d='M516 1L546 1.5L541 9H511L516 1Z' fill='url(%23paint9_linear_829_982)'/%3E%3Cpath d='M226.5 1.5L196.5 2L201.5 9H231.5L226.5 1.5Z' fill='url(%23paint10_linear_829_982)'/%3E%3Cpath d='M548 1.5L578 2L573 9H543L548 1.5Z' fill='url(%23paint11_linear_829_982)'/%3E%3Cpath d='M194.5 2L165.5 2.5L169.5 9H199.5L194.5 2Z' fill='url(%23paint12_linear_829_982)'/%3E%3Cpath d='M580 2L609 2.5L605 9H575L580 2Z' fill='url(%23paint13_linear_829_982)'/%3E%3Cpath d='M163.5 2.5L134.5 3L137.5 9H167.5L163.5 2.5Z' fill='url(%23paint14_linear_829_982)'/%3E%3Cpath d='M611 2.5L640 3L637 9H607L611 2.5Z' fill='url(%23paint15_linear_829_982)'/%3E%3Cpath d='M132.5 3H102.5L105.5 9H135.5L132.5 3Z' fill='url(%23paint16_linear_829_982)'/%3E%3Cpath d='M642 3H672L669 9H639L642 3Z' fill='url(%23paint17_linear_829_982)'/%3E%3Cpath d='M100.5 3L70.5 3.5L73.5 9H103.5L100.5 3Z' fill='url(%23paint18_linear_829_982)'/%3E%3Cpath d='M674 3L704 3.5L701 9H671L674 3Z' fill='url(%23paint19_linear_829_982)'/%3E%3Cpath d='M68.5 3.5L38.5 4L41.5 9H71.5L68.5 3.5Z' fill='url(%23paint20_linear_829_982)'/%3E%3Cpath d='M706 3.5L736 4L733 9H703L706 3.5Z' fill='url(%23paint21_linear_829_982)'/%3E%3Cpath d='M36.5 4H6.5L9.5 9H39.5L36.5 4Z' fill='url(%23paint22_linear_829_982)'/%3E%3Cpath d='M738 4H768L765 9H735L738 4Z' fill='url(%23paint23_linear_829_982)'/%3E%3Cpath d='M5 4.5L0 9H7.5L5 4.5Z' fill='url(%23paint24_linear_829_982)'/%3E%3Cpath d='M769.5 4.5L774.5 9H767L769.5 4.5Z' fill='url(%23paint25_linear_829_982)'/%3E%3Cpath d='M387.5 8.5L379.5 0H395L387.5 8.5Z' fill='url(%23paint26_linear_829_982)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint5_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint6_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint7_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint8_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint9_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint10_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint11_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint12_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint13_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint14_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint15_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint16_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint17_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint18_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint19_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint20_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint21_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint22_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint23_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint24_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint25_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint26_linear_829_982' x1='0' y1='8.99989' x2='775' y2='8.99989' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23906720'/%3E%3Cstop offset='0.498065' stop-color='%23E3AB3C'/%3E%3Cstop offset='1' stop-color='%23916820'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

<div class="container">
  <section>
    <div class="image-top"></div>
    <div class="logo"><img src="img/maintance-logo.png" alt="">
      <div class="logo-text">
        <p>INTERNATIONAL CYBER CUP</br>
        </p>
        <p class="logo-text-2">TOP WORD GAMING</p>
      </div>
    </div>
    <div class="work">
      <p>Ведутся технические работы. Сайт скоро заработает.<br> Больше информации в группе <a href="https://vk.com/iccupcom">vk.com/iccupcom</a>

      </p>
    </div>
    <div class="twit">
      <blockquote class="twitter-tweet">
        <p lang="en" dir="ltr">New <a href="https://twitter.com/hashtag/DotA?src=hash&amp;ref_src=twsrc%5Etfw">#DotA</a> Season 54 will start on March 3rd. This season&#39;s maintenance and core infrastructure update will take longer than usual, so please be patient! We&#39;ll
          let you know as soon as you can play on <a href="https://twitter.com/hashtag/iCCup?src=hash&amp;ref_src=twsrc%5Etfw">#iCCup</a>!</p>&mdash; iCCup.com (@iCCupcom) <a href="https://twitter.com/iCCupcom/status/1630983890780160003?ref_src=twsrc%5Etfw">March 1, 2023</a></blockquote>
    </div>
  </section>
</div>
</div>

БЛОГ НА HUSL

Изображение для топ бордера

Ответы (3 шт):