Блог

У меня есть два SVG-изображения (одно для мобильных устройств и одно для обычных экранов), и я пытаюсь выяснить, где их добавить в код. У меня уже создана дочерняя тема. Я планировал использовать этот код в своей структуре заголовка:

 .trawell-cover {
  background-image: url('https://intentionaldetours.com/wp-content/uploads/2019/02/intentional-detours-2-1920x1080.jpg');
  background-size: cover;
}
  

вместо этого вы замените свойство src адресом SVG.

В любом случае, я буквально не могу найти, где находится тег src=, и не знаю, должен ли я сделать это вместо этого:

 .trawell-cover {
    position: relative;
}

img {
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}

img.desktopImage {
    display: block;
}

img.mobileImage {
display: none;
}

 ...

@media screen and (max-width: 500px) {
    .desktopImage {
        display: none;
           }

    .mobileImage {
    display: block;
    }
}
  

Я просто не вижу этот раздел с тегами src= нигде в main.css. Я новичок в этом, но я действительно хочу этого добиться.

Не могу сильно стараться, так как не могу найти область, где она должна быть.

 .trawell-cover {
position: relative;
}

img {
height: 300px;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}

img.desktopImage {
display: block;
}

img.mobileImage {
display: none;
}
  

…

 @media screen and (max-width: 500px) {
    .desktopImage {
    display: none;
    }

    .mobileImage {
        display: block;
        }
    }
  

Я хочу, чтобы мои SVG-изображения на моем сайте были такими же, как на сайте lostwithpurpose.com

Вы должны отделить текст от изображения «intentional-detours-2-1920×1080.jpg «. Затем в вашей HTML-разметке создайте тег img внутри .trawell-обложка div.

Тег src =»» присутствует только в теге img, которым вы не можете управлять в css.

в html это должно выглядеть так:

 <div class="trawll-cover">
   <!-- Add the url of Intentional Detours text in png/svg format in src I used your reference as example -->
   <img src="https://www.lostwithpurpose.com/wp-content/themes/Wander-child/img/lwp-wordmark-new.svg" width="300" height="auto">
</div>