SVG as Section Separator

HTML & CSS
1

I saw something I am trying to emulate, to a degree. Right now I am using the exact asset, but I wanted to use different styles that I create myself using an SVG as a Section Separator.

How do you define the color of the SVG and make the other half transparent like a PNG?

Here is the example (Specifically the Drip look): http://rocketwp.dan-fisher.com/demo-default/elements/sections/
Scroll down to the “Drops” section.

Here is the way it is turning out on my page: http://shadownation.com
I won’t be using the same svg on the finished product, I just wanted to use Dan Fisher’s as a test to see if I could make it work.

Thanks,

Brad

2

It is already transparent by default. You just need to make the element’s background-color the same as the following element.

.drips-background {
	width: 100%;
	height: 0;
	background-image: url(http://deadradioentertainment.com/drips2.svg);
	background-position: 50%;
	background-repeat: no-repeat;
	bottom: 0;
	background-color: #191F26; /* added this */
}
3

That was it. I don’t know why I didn’t try that before. I think I had created a background color for

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.