How do you create non rectangular shaped image on website header/hero?How to add some non-standard font to a website?How do you keep parents of floated elements from collapsing?Find out if radio button is checked with JQuery?How to affect other elements when a div is hoveredHTML5 Canvas vs. SVG vs. divPure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itHow to apply a CSS filter to a background imageRemove blue border from css custom-styled button in ChromeIs it possible to apply CSS to half of a character?How to change hero image based on html page?
Does WSL2 runs Linux in a virtual machine or alongside windows Kernel?
How do people drown while wearing a life jacket?
Why wasn't interlaced CRT scanning done back and forth?
What does Argus Filch specifically do?
How long should I wait to plug in my refrigerator after unplugging it?
Subtle ways to render a planet uninhabitable
How does Rust's 128-bit integer `i128` work on a 64-bit system?
A verb for when some rights are not violated?
Accurately recalling the key - can everyone do it?
On the expression "sun-down"
Which honorific is correct, oshumi or goshumi?
Subverting the essence of fictional and/or religious entities; is it acceptable?
Is law enforcement responsible for damages made by a search warrant?
Lower bound for the number of lattice points on high dimensional spheres
Can't understand an ACT practice problem: Triangle appears to be isosceles, why isn't the answer 7.3~ here?
Why isn't the new LEGO CV joint available on Bricklink or Brickowl?
Deflecting lasers with lightsabers
coding the arrow's path in flowchart
Skipping same old introductions
Meaning of ギャップ in the following sentence
How to understand "...to hide the evidence of mishandled magic, or else hidden by castle-proud house-elves" in this sentence
Is an "are" omitted in this sentence
Is the first page of Novel really that important?
Went to a big 4 but got fired for underperformance in a year recently - Now every one thinks I'm pro - How to balance expectations?
How do you create non rectangular shaped image on website header/hero?
How to add some non-standard font to a website?How do you keep parents of floated elements from collapsing?Find out if radio button is checked with JQuery?How to affect other elements when a div is hoveredHTML5 Canvas vs. SVG vs. divPure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itHow to apply a CSS filter to a background imageRemove blue border from css custom-styled button in ChromeIs it possible to apply CSS to half of a character?How to change hero image based on html page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
html css svg photoshop adobe-illustrator
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
add a comment |
0
I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
html css svg photoshop adobe-illustrator
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
add a comment |
0
0
0
I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
html css svg photoshop adobe-illustrator
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
html css svg photoshop adobe-illustrator
html css svg photoshop adobe-illustrator
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
asked Mar 27 at 1:06
Dennis GathaguDennis Gathagu
375 bronze badges
375 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
add a comment |
1
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one.pngformatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.
– RobC
Mar 27 at 14:33
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:[+1])
– RobC
Mar 27 at 15:36
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
add a comment |
0
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368336%2fhow-do-you-create-non-rectangular-shaped-image-on-website-header-hero%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
add a comment |
1
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
add a comment |
1
1
1
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
answered Mar 27 at 1:44
Jordan DuntonJordan Dunton
891 silver badge8 bronze badges
891 silver badge8 bronze badges
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
add a comment |
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
1
1
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Thanks, SVG worked great for me. :-)
– Dennis Gathagu
Mar 27 at 11:08
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
Not very portable across older browsers though.
– RobC
Mar 27 at 15:39
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
@RobC what is the best way to handle the older browser issues?
– Dennis Gathagu
Mar 27 at 19:50
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
Dennis - Use progressive enhancement and consider creating a SVG fallback - which will entail detecting for SVG support and serving up methods such as @ibra's answer (or those mentions in the comments below it) when SVG is not supported by the browser. However, If you only care about supporting modern browsers then just use SVG.
– RobC
Mar 28 at 9:14
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
@DennisGathagu In addition to what RobC is saying, you can save your SVG document that you crafted the banner with as an image. Images work in all browsers as far as I know. You can then dabble in responsive web design to get the same "scale-able" attributes as an SVG. I'd reccomend CSS-Tricks article on Responsive units in the link below. css-tricks.com/fun-viewport-units
– Jordan Dunton
Mar 28 at 21:06
add a comment |
1
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one.pngformatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.
– RobC
Mar 27 at 14:33
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:[+1])
– RobC
Mar 27 at 15:36
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
add a comment |
1
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one.pngformatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.
– RobC
Mar 27 at 14:33
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:[+1])
– RobC
Mar 27 at 15:36
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
add a comment |
1
1
1
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>.wrap position:relative;width:969px;height:300
.wrap .bg height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover
.wrap .mask position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
answered Mar 27 at 1:56
IbraIbra
4502 silver badges9 bronze badges
4502 silver badges9 bronze badges
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one.pngformatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.
– RobC
Mar 27 at 14:33
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:[+1])
– RobC
Mar 27 at 15:36
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
add a comment |
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one.pngformatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.
– RobC
Mar 27 at 14:33
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:[+1])
– RobC
Mar 27 at 15:36
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
1
1
This approach is more portable across older browsers than a SVG solution. However, you could just use one
.png formatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.– RobC
Mar 27 at 14:33
This approach is more portable across older browsers than a SVG solution. However, you could just use one
.png formatted hero image with a transparent cut-out (i.e. transparent where the curve is), instead of using a separate/additional image mask.– RobC
Mar 27 at 14:33
2
2
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
@RobC Yes, I agree. But some people can use this solution when they have a lot of main pictures or user uploaded images :)
– Ibra
Mar 27 at 15:12
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:
[+1])– RobC
Mar 27 at 15:36
I agree too. There's lots of pro's and cons with either your current solution or the approach I mentioned in my previous comment. For example using your current solution: 1) If the background is not white (as per the OP) then a different colored mask is required to match the background color. 2) Also, if the background is a repeated pattern or another image then a mask with a background pattern or matching image is necessary - alignment with repeated patterns then becomes difficult. (1 and 2 are not an issue using the approach I mentioned in my previous comment - btw:
[+1])– RobC
Mar 27 at 15:36
1
1
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
What's for certain though is your solution is more portable across older browsers than SVG. If the OP opts for the SVG approach they'll inevitably soon realize that they need to create a fallback using this method or similar - then they'll ask themselves why am I using the SVG solution at all ;)
– RobC
Mar 27 at 15:46
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
@RobC so that really means using the SVG might be expensive to maintain in the long run?
– Dennis Gathagu
Mar 27 at 19:57
add a comment |
0
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
add a comment |
0
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
add a comment |
0
0
0
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
answered Mar 27 at 5:53
Matthew T RaderMatthew T Rader
1168 bronze badges
1168 bronze badges
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
add a comment |
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Not very portable across older browsers though.
– RobC
Mar 27 at 15:38
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yeah, then create the image like that in a photo editing program like photoshop.
– Matthew T Rader
Mar 27 at 15:50
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
Yep, that's typically what happens in the real world. i.e. Use the new shiny browser things --> client then tries it in an older browser --> then back to circa 2014 methods ;)
– RobC
Mar 27 at 15:59
1
1
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
you'd probably think SVG being there for years shouldn't have browser compatibility issues
– Dennis Gathagu
Mar 27 at 19:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368336%2fhow-do-you-create-non-rectangular-shaped-image-on-website-header-hero%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
