0

I have two SVG images (one for mobile and one for regular screens) and I'm trying to figure out where to add them into the code. I have a child theme created already. I was planning to use this code to my header structure: 

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

you will replace the src property with the address of the SVG instead.

Anyways, I literally cannot find where the src= tag and don't know whether I should do this instead:

.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;
    }
}

I just am not seeing this section with the src= tags anywhere in main.css. I am new to this but i really want to accomplish this.

Can't try much since I cannot find the area where it should be.

.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;
        }
    }

I want my SVG images on my site like on the site lostwithpurpose.com

Harsh Khare
  • 507
  • 1
  • 3
  • 13
Samantha Shea
  • 1
  • 1

1 Answers1

0

You have to separate the text from the image "intentional-detours-2-1920x1080.jpg". Then in your html markup create an img tag inside .trawell-cover div.

The src="" tag is only present in img tag which you cannot manipulate in css.

it should look like this in 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>
Mel
  • 858
  • 8
  • 15
  • Thank you for your reply. However where do I get to the HTML markup? I know where the CSS main.css style sheet is, but I can’t figure our where to add this in. (I’m using Wordpress) – Samantha Shea Apr 10 '19 at 14:24
  • its inside your child theme. If its not there you need to copy the header.php from your parent theme and paste it to your child theme so that you can modify the header.php. From there you need to find the tag with the class of trawll-cover. Let me know if you find it. – Mel Apr 11 '19 at 11:26