How do I add a overlaying image?

[Alecar983]

http://pipanel.co.uk/

that’s my website, I used svg to make the hexagons, I was wonder if there was a easy way to overlay say this image http://goo.gl/dheZNl on the home one and etc. I wanted it to look like this picture I made in photoshop. http://imgur.com/vKLlQbd
http://codepen.io/Alecar983/pen/KVGvQL

[Shikkediel]

You could just set it as a background-image to the svg…

[Alecar983]

the svg is transparent so you can see the background image through it, putting the house image as the background messes it up and makes that become the background of the whole website. I’m probs doing it wrong though .

[Shikkediel]

Try to add this, it sort of works :

svg {
  background: url(//goo.gl/dheZNl) center;
}

Unfortunately a pseudo won’t affect an svg… but another option I can think of would be to inline the image in the svg with xlink.

Image element

[Shikkediel]

Of course masking is an alternative as well but the above would be the most cross browser solution.

[Alecar983]

using the thing you link just applied it to all of them which I didn’t want, I wanted to have individual images on each hexagon

[Shikkediel]

putting the house image as the background messes it up and makes that become the background of the whole website.

That was just to show it basically does work.

[Alecar983]

I got it to work on the one svg. Thanks man. Just need to figure how to move it up a little without moving the svg

[Shikkediel]

How about this?

.hexagon2 {
  width: 150px;
  background: url(//goo.gl/dheZNl) top center / 65% no-repeat;
}

codepen.io/anon/pen/adRaZz

[Alecar983]

Nope :( That makes no image come up

Edit: changed something and yeah that kind of fixes it, but the image is a little to high, but I reckon I could work with that, maybe.

[Shikkediel]

You could do some trial and error to get the background size and position right. If you want the image on top, you’ll need to use the inlined xlink approach.

[Author]

Posts