How do you add a background image to an SVG shape. I have made the shape fluid so I am looking for a way to add a background image that scales according to the size of the shape.
Is it possible to then add a gradient over this background image?
Please check this CodePen link for the shape so far-codepen
Essentially I want to create something like this below. Any help would be appreciated:
Hi there Computerjuice,
here is a possible solution…
[code]
untitled document html,body { height:100%; margin:0; background-color:#222; } #shapeContainer { width:35%; height:100%; margin:auto; background-image:linear-gradient(to bottom,rgba(255,159,63,0.2),rgba(255,159,63,0.8)), url(http://coothead.co.uk/images/amy.jpg); background-size:auto 100%; background-position:center top; } #shapeContainer svg { display:block; width:100%; height:100%; } @media screen and (max-height:400px) { #shapeContainer { background-size:auto 150%; } } @media screen and (max-height:200px) { #shapeContainer { background-size:auto 200%; } } @media screen and (max-height:100px) { #shapeContainer { background-size:auto 300%; } }coothead
Coothead thanks for replying to my post. The only problem with your approach is that this shape needs to overlap other elements.
However because your solution relies on a triangle on top of a rectangle div-to create the shape, the shape(i.e. the triangle part) would fully cover the element the shape is supposed to overlap.
Is it possible to add a background image and gradient to the shape in the codepen?
Not ready for prIme time yet but in webkit you can use clip-path (and shapes) to get the shape you want.
Or break out the popcorn…
Hi there Computerjuice,
perhaps this 
is a teeny-weeny bit better. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="page.css" media="screen">
<style media="screen">
html,body {
background-image:linear-gradient(to bottom,#fed,#432);
background-attachment:fixed;
}
#svgcontainer{
position:fixed;
top:0;
width:50%;
height:100vh;
}
#svgcontainer svg {
display:block;
width:100%;
height:100%;
}
#svgcontainer h1 {
position:absolute;
left:50%;
top:40%;
text-transform:uppercase;
color:#ddd;
text-shadow:0 0 1px #300,0 0 2px #300,0 0 3px #300;
white-space:nowrap;
}
#content{
padding:4%;
margin-left:52%;
box-sizing:border-box;
}
@media screen and (max-width:440px) {
#svgcontainer h1{
white-space:normal;
}
}
@media screen and (max-width:330px) {
#svgcontainer h1{
font-size:150%;
}
}
</style>
</head>
<body>
<div id="svgcontainer">
<h1>Amy Winehouse</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 100">
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="1" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="image" x="0" y="0" height="100%" width="100%" viewBox="0 0 432 1080">
<image x="0" y="0" width="432" height="1080" xlink:href="http://coothead.co.uk/images/amy.jpg"></image>
</pattern>
</defs>
<a xlink:href="http://www.theguardian.com/music/amywinehouse">
<polygon points="0,0 40,0 40,100 20,100" fill="url(#image)" filter="url(#dropShadow)" stroke="#321" stroke-width="0.1"/>
</a>
</svg>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
</body>
</html>
coothead
Hi @PaulOB and thanks for the reply. Initially I did explore using CSS Shapes and Clip-path and I think it would have been the more intuitive way, for me. However I was turned off by the lack of support by IE, Firefox and Opera etc. So ended up making the shape using SVG but have become stumped now I need to add the gradient and image inside it.
Nice article By Sara though thanks for that.
Hi @John_Betong thanks for the Video, although a very interesting video, my problem was not really covered by Sara’s SVG talk.
Hi @coothead thanks for your reply. Essentially I want to do 2 things
1) add a background image to my shape and 2) add a yellow gradient over that background image.
Your approach tackles the first, but not the second problem of adding the gradient. In fact I got really excited that you had fully solved my problem…
and then I looked deeper I realised your image had already been given a yellow tint outside the browser.
Is it not possible to add a gradient and add an image to an SVG shape? If not I will need to revisit my design and come up with an alternative design.
I don’t know as yet, as I haven’t got that far
in my “svg” experimentations 
Also, I needed to know if you felt that the
code was going in the right direction.
In the meanwhile I have been scratching my
arse and engaging in a few other disgusting
things that us old godgers get up to . 
coothead
Hi there Computerjuice,
OK, I have recovered some semblance of normality. 
The image on my server has been replaced with with
a nice glossy 
monochrome version
Here is the modified code with “linear-gradient” added…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="page.css" media="screen">
<style media="screen">
html,body {
background-image:linear-gradient(to bottom,#fed,#432);
background-attachment:fixed;
}
#svgcontainer{
position:fixed;
top:0;
width:50%;
height:100vh;
}
#svgcontainer svg {
display:block;
width:100%;
height:100%;
}
#svgcontainer h1 {
position:absolute;
left:50%;
top:40%;
text-transform:uppercase;
color:#ddd;
text-shadow:0 0 1px #300,0 0 2px #300,0 0 3px #300;
white-space:nowrap;
}
#content{
padding:4%;
margin-left:52%;
box-sizing:border-box;
}
@media screen and (max-width:440px) {
#svgcontainer h1{
white-space:normal;
}
}
@media screen and (max-width:330px) {
#svgcontainer h1{
font-size:150%;
}
}
</style>
</head>
<body>
<div id="svgcontainer">
<h1>Amy Winehouse</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 100">
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="1" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="grad" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="rgb(227,131,18)" stop-opacity="0.0"/>
<stop offset="100%" stop-color="rgb(227,131,18)" stop-opacity="0.9"/>
</linearGradient>
<pattern id="image" x="0" y="0" height="100%" width="100%" viewBox="0 0 432 1080">
<image x="0" y="0" width="432" height="1080" xlink:href="http://coothead.co.uk/images/amy.jpg"></image>
</pattern>
</defs>
<a xlink:href="http://www.theguardian.com/music/amywinehouse">
<polygon points="0,0 40,0 40,100 20,100" fill="url(#image)" filter="url(#dropShadow)" stroke="#321" stroke-width="0.1"/>
<polygon points="0,0 40,0 40,100 20,100" fill="url(#grad)"/>
</a>
</svg>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
</body>
</html>
coothead
Definitely in the right direction😊
How much further have we got to go? 
coothead
It’s Perfect!!! I may have a few questions to ask you about it, but i’ll save that for when I put it together tomorrow.
Thank you Coothead! You can suspend the trip to 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.