'Is it possible to crop bottom of div/section using svg/png shape in html
I want to start new content right after end of svg/png arc shape. The empty transparent space should be filled by new div content (in other words one section should end with arc shape and other should start right after it keeping the empty (transparent) area below arc should be reserved by new section content).
<section style="background-image: url('pattern_1.jpg');">
Content goes here...
<img src="arc1.svg"/>
</section>
<section style="background-image: url('pattern_2.jpg');">
Content goes here...
<img src="arc2.svg"/>
</section>
<section style="background-image: url('pattern_3.jpg');">
Content goes here...
<img src="arc3.svg"/>
</section>
Here is the sample output that I want:
here is what I get right now:
It seems that I want to clip path using the arc.svg dynamically. I mean, user will add more sections (each section with different arc shape). and also how can we make it responsive when we don't know the upcoming arc shape.
Solution 1:[1]
You can use clip-path to clip elements (section) in some shape.
I created a rough example just to show how it could work:
section { position: relative; }
section > div { min-height: 600px; }
section:not(:last-of-type) > div { clip-path: ellipse(125% 70% at 20% 0%); }
section + section { margin-top: -50%; }
.red { background-color: red; }
.blue { background-color: blue; }
section:not(:last-of-type):before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.2' viewBox='0 0 393 86'%3E%3Cpath fill='red' d='M-12 63s61-18.9 85-12c24 6.9 110 18.1 143 8C249 48.9 408-5 408-5v29S240.3 79.7 213 82C84 93-6 72.9-6 72.9z'/%3E%3C/svg%3E");
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 500;
}<section style="z-index: 3">
<div style="background: black;">
Content goes here...
</div>
</section>
<section style="z-index: 2">
<div style="background: gray;">
Content goes here...
</div>
</section>
<section style="z-index: 1">
<div style="background: lightgray;">
Content goes here...
</div>
</section>You can use online clip-path generators like Clippy to create custom shape.
Solution 2:[2]
*{
font-family: 'Open Sans';
}
body{
margin: 0px;
}
img{
width: 100%;
}
section{
position: relative;
}
section svg {
position: absolute;
left: 0;
top: 0;
}
section .arc-overlay {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
section .st0 {
fill: transparent;
}
@media screen and (max-width: 768px) {
.content > div{
display: block !important;
}
.content .cnt-1{
max-width: 100% !important;
}
}<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://demo.zhardsoft.com/arc-pattern/svg-inject.js"></script>
<script type="text/javascript">
SVGInject.setOptions({
useCache: false,
copyAttributes: false,
makeIdsUnique: false,
afterInject: function(img, svg) {
var svgElm=$(svg);
var svgHeight=svgElm.height();
svgElm.parents('section').css({'background-position-y':'-'+svgHeight+'px'});
svgElm.parents('section').find('.arc-overlay').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});
svgElm.parents('section').find('svg').css({'top':'-'+(svgHeight-1)+'px',});
},
});
$(window).on('resize',function(){
$('section svg').each(function(){
var svgElm=$(this);
var svgHeight=svgElm.height();
svgElm.parents('section').css({'background-position-y':'-'+svgHeight+'px'});
svgElm.parents('section').find('.arc-overlay').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});
svgElm.parents('section').find('svg').css({'top':'-'+(svgHeight-1)+'px',});
})
})
</script>
</head>
<body>
<section style="min-height: 500px;background-image: url(https://demo.zhardsoft.com/arc-pattern/wp2733014.jpg);background-size: 100% auto;">
<div class="content" style="padding: 40px;padding-bottom: 150px">
<div style="display: flex;display: -inline-flex;display: -webkit-flex;width: 100%">
<div style="padding: 20px"><img src="https://demo.zhardsoft.com/arc-pattern/img1.png" style="width: 250px"></div>
<div class="cnt-1" style="color: #EBEBEB;max-width: 50%">
<h1>ECOLOGICAL PRODUCTION</h1>
We recycle all organic waste we produce, also, we obtain organic waste from other farms, restaurants, and food markets. The organic waste we collect allows a particular larva from the Hermetia illucens species, known commonly as black soldier fly larva (BSFL), to feeds on it and grow fatter. When the larva has developed to a pupa, it is cleaned, cooked and grided to a paste used as a high-quality protein and lipids perfectly suited as ecological animal feed, reducing the need for wild-sourced feed ingredients such as fishmeal which contributes to the global overfishing.</div>
</div>
</div>
</section>
<section style="min-height: 300px;background-image: url(https://demo.zhardsoft.com/arc-pattern/wp2732984.jpg);background-size: 100% auto;padding: 0 40px">
<div class="content" style="padding: 20px;padding-bottom: 40px">
<div style="display: flex;display: -inline-flex;display: -webkit-flex;width: 100%;justify-content: flex-end;">
<div class="cnt-1" style="color: #EBEBEB;max-width: 50%;text-align: right;flex-grow: 1">
<h1 style="color: #FDC403">LOCAL COMMUNITY<br>ENGAGEMENT.</h1>
It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
</div>
</div>
<div class="arc-overlay" style="background-image: url(https://demo.zhardsoft.com/arc-pattern/wp2732984.jpg);background-size: 100% auto;-webkit-mask: url('https://demo.zhardsoft.com/arc-pattern/arc.svg') top/100% auto no-repeat"></div>
<img src="https://demo.zhardsoft.com/arc-pattern/arc.svg" onload="SVGInject(this);"/>
</section>
</body>
</html>For SVG Add a path under the arc in your SVG, to cover the bottom of the pattern. This is used to manipulate the background to match the pattern below it. for the above pattern no additional path is needed https://i.stack.imgur.com/qxsWV.png
the class name (path) in the SVG file must match the css style (.st0) you can change it with the class name you want.
Solution 3:[3]
<section class="bg-1">
<img class="hero" src="hero.png" alt="" width="100%" height="auto">
<img class="logo" src="logo.png" alt="" width="300px" height="auto">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">We Are Using </h1>
<h3 class="sub-title">High-tech and artificial intelligence (AI) To produce ecological food.</h3>
</div>
<div class="col-md-6">
<img class="about-img" src="about.png" alt="Food" width="70%" height="auto">
</div>
<div class="col-md-6">
<article class="about">
<h2>About Us</h2>
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="bg-2">
<img class="food" src="food-2.png" alt="" width="20%" height="auto">
<div class="container">
<div class="row">
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
</div>
</div>
</section>
<section class="bg-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<article id="article-1">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-2">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-3">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-4">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
</div>
</div>
<img class="food" src="food-2.png" alt="" width="20%" height="auto">
</section>
Solution 4:[4]
body{
background: #999;
margin: 0;
padding: 0;
body{
background: #999;
margin: 0;
padding: 0;
}
.logo{
position: absolute;
left: 100px;
top: 100px;
z-index: 999;
}
.bg-1, .bg-2, .bg-3{
padding: 100px 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
width: 100%;
height: auto;
}
.bg-1{
background-image: url(bg-111.png);
padding-top: 0;
z-index: 50;
}
.bg-2{
background-image:url(bg-2.png);
margin-top: -400px;
padding-top: 500px;
padding-bottom: 200px;
z-index: 5;
}
.bg-3{
background-image:url(bg-3.png);
margin-top: -300px;
padding-top: 400px;
padding-bottom: 300px;
}
.bg-1 .title{
color: #ffc602;
font-size: 77px;
margin-bottom: 50px:
}
.bg-1 .sub-title{
color: #fff;
font-size: 34px;
margin-bottom: 70px;
}
.bg-2 .food{
position: absolute;
right: 0;
bottom: 100px;
}
.bg-3 .food{
position: absolute;
left: 0;
bottom: 100px;
z-index: 200;
}
.about h2 {
color: #ffc602;
font-size: 55px;
margin-bottom: 50px:
}
.about p {
color: #fff;
font-size: 15px;
line-height: 1.8;
margin-bottom: 50px:
}
.article-1{
padding: 100px;
z-index: 10;
}
section{
position: relative;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section class="bg-1">
<img class="hero" src="hero.png" alt="" width="100%" height="auto">
<img class="logo" src="logo.png" alt="" width="300px" height="auto">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">We Are Using </h1>
<h3 class="sub-title">High-tech and artificial intelligence (AI) To produce ecological food.</h3>
</div>
<div class="col-md-6">
<img class="about-img" src="about.png" alt="Food" width="70%" height="auto">
</div>
<div class="col-md-6">
<article class="about">
<h2>About Us</h2>
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="bg-2">
<img class="food" src="food-2.png" alt="" width="20%" height="auto">
<div class="container">
<div class="row">
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
</div>
</div>
</section>
<section class="bg-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<article id="article-1">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-2">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-3">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</article>
</div>
<div class="col-md-6">
<article id="article-4">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
</div>
</div>
<img class="food" src="food-2.png" alt="" width="20%" height="auto">
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>Solution 5:[5]
<body>
<!-- Main Section Start-->
<div class="wrapper">
<section class="header-img">
<img src="images/header-img.png" alt="header-image" title="header-image">
</section>
<section class="pattern_1 pattern">
<div class="container">
<div class="row">
<div class="col-sm-12 margin-b">
<h1>We Are Using</h1>
<p>High-tech and artificial intelligence (AI) To produce ecological food.</p>
</div>
<div class="col-sm-6 text-center">
<img src="images/about-img.png" alt="about-img" title="about-img">
</div>
<div class="col-sm-6">
<h2>About Us</h2>
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</div>
</div>
</div>
<img class="about-divider" src="images/about-bottom-img.png"/>
</section>
<section class="pattern_2 pattern">
<div class="container">
<div class="row margin-b">
<div class="col-sm-6">
<h2>Ecological Production</h2>
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</div>
<div class="col-sm-6 text-center pattern-2img">
<img src="images/about-img-02.png" alt="about-img" title="about-img">
</div>
</div>
<div class="row">
<div class="col-sm-5 text-center">
<img src="images/about-img-03.png" alt="about-img" title="about-img">
</div>
<div class="col-sm-7">
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</div>
</div>
</div>
<img class="about-divider" src="images/ecology-bottom-img.png"/>
</section>
<section class="pattern_3 pattern">
<div class="container">
<div class="row margin-b">
<div class="col-sm-8 pull-right text-r">
<h2>Local Community Engagement.</h2>
<p>
Pete’s Claws and Fins is a high-tech producer of ecological seafood. We use state-of-the-art, highly computerized equipment to monitor and manage our seafood to ensure it is of the highest possible quality. All equipment we use is developed by ourselves in-house. We are the only company operating such high-tech equipment. The company started its research and development 2016 by Peter Persson, a Swedish inventor who has designed and built automated and computer-controlled machines and robots for over 30 years. Peter has over the years developed an increasing personal interest for natural and unprocessed food, and though he could make difference with help of his high-tech knowhow.
</p>
</div>
</div>
</div>
</section>
<section class="foote-img">
<img class="circle-img" src="images/circle-img.png"/>
<img src="images/footer-img.png" alt="footer-img" title="footer-img">
</section>
</div>
<!--/Main Section End-->
</body>
Solution 6:[6]
<section id="section_2" class="bg-2">
<div class="section-2-bg">
<!-- <h2>Section 2</h2> -->
<div class="section-2-outer">
<div id="section_2_inner" class="section-2-inner">
<style media="screen">
#section_2_inner {
position: relative;
background-image: url(pattern_2.jpg);
padding: 300px 0px 120px;
width: 100%;
min-height: 600px;
}
</style>
<script type="text/javascript">
var height = document.getElementById('section_2_inner').offsetHeight;
let radius7 = 40;
if (height <= 650) {
radius7 = 32 - (height - 400)/20;
}else if (height <= 700) {
radius7 = 45 - (height - 400)/20;
}else if (height <= 1200) {
radius7 = 60 - (height - 400)/20;
}else {
radius7 = 32 - (height/100);
}
var radi_result = `#section_2_inner {
border-radius: 0% 0% 45% 5% / 50% 50% `+ radius7 +`% 5%;
}`;
var style = document.createElement('style');
style.innerHTML = radi_result;
document.head.appendChild(style);
</script>
<div class="section-2-inner-content">
<!-- section 2 content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Section 2</h2>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<div class="col-md-6">
<article class="">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
<img id="arc-2" src="arc-2.png" alt="" width="100%" height="auto">
</div>
</div>
<img class="food" src="food-2.png" alt="" width="30%" height="auto">
</section>
Solution 7:[7]
body{
background-image: url(bg.png);
background-size: contain;
background-position: bottom;
margin: 0;
padding: 0;
}
.logo{
position: absolute;
left: 100px;
top: 100px;
z-index: 999;
}
.bg-1, .bg-2, .bg-3{
padding: 100px 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
width: 100%;
height: auto;
}
.bg-1{
background-image: url(bg-111.png);
padding-top: 0;
z-index: 50;
}
.bg-1 .title{
color: #ffc602;
font-size: 77px;
margin-bottom: 50px:
}
.bg-1 .sub-title{
color: #fff;
font-size: 34px;
margin-bottom: 70px;
}
.bg-2 .food{
position: absolute;
right: 0;
bottom: 0px;
z-index: 200;
}
.bg-3 .food{
position: absolute;
left: 0;
bottom: -25px;
z-index: 200;
}
.about h2 {
color: #ffc602;
font-size: 55px;
margin-bottom: 50px:
}
.about p {
color: #fff;
font-size: 15px;
line-height: 1.8;
margin-bottom: 50px:
}
#section_2 .title, #section_3 .title{
font-size: 55px;
margin-bottom: 30px;
}
.article-1{
padding: 100px;
z-index: 10;
}
section{
position: relative;
}
#section_2{
margin-top: -450px
}
#section_2 .section-2-outer{
position: relative;
width: 100%;
height: auto;
}
.section-2-inner-content{
margin-left: auto;
margin-right: 2%;
}
#arc-2{
position: absolute;
bottom: -120px;
left: 0;
z-index: 100;
}
#arc_3{
position: absolute;
bottom: -110px;
left: 0;
z-index: 100;
}
Solution 8:[8]
1.make div for background as parent set pattern background 2. make div under set backgorund layer-1
- adjust background using css
Solution 9:[9]
*{
font-family: 'Open Sans';
}
body{
margin: 0px;
}
img{
width: 100%;
}
section{
position: relative;
}
section svg {
position: absolute;
left: 0;
top: 0;
}
section .content{
position: absolute;
left: 0;
top: 0px;
z-index: 1;
}
section .top-clip {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
section {
/*background-size: 100% auto;*/
}
section #pattern_top {
fill: transparent;
}
section #pattern_bottom {
fill: transparent;
}
.pattern-prev-clip,.pattern-bottom-clip{
/*background-size: 100% auto;*/
}
@media screen and (max-width: 768px) {
.content > div{
display: block !important;
}
.content .cnt-1{
max-width: 100% !important;
}
}<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://demo.zhardsoft.com/arc-pattern-3/svg-inject.js"></script>
<script type="text/javascript">
var svgInjectElements=[];
var tt=0;
SVGInject.setOptions({
useCache: false, // no caching
copyAttributes: false, // do not copy attributes from `<img>` to `<svg>`
makeIdsUnique: false, // do not make ids used within the SVG unique
afterInject: function(img, svg) {
svgInjectElements[parseInt($(img).attr('img-arc'))]=svg;
if(tt > $('.img-arc').length){
svgInjectElements.forEach(function(svg){
loadSVGInject(svg);
})
}
tt++;
},
});
function loadSVGInject(svg){
var svgElm=$(svg);
var parentSection=svgElm.parents('.section');
var prevSection=svgElm.parents('.section').prev();
// svgElm.parents('section').find('svg #pattern_bottom').wrap('<defs></defs>').wrap('<clipPath id="my-clip" clipPathUnits="objectBoundingBox"></clipPath>');
var clipID=parentSection.attr('data-clip-id');
var prevClipID=prevSection.attr('data-clip-id');
parentSection.find('svg #pattern_bottom_clip').attr('id','pattern_bottom_clip_'+clipID);
parentSection.find('svg #pattern_top_clip').attr('id','pattern_top_clip_'+clipID);
var svgHeight=svgElm.height();
parentSection.css({'background-position-y':'-'+svgHeight+'px'});
parentSection.find('svg').css({'top':'-'+(svgHeight-1)+'px',});
if(prevSection.find('.pattern-prev-clip').length<=0){
parentSection.find('svg #pattern_top').attr('transform','scale('+(1/svgElm[0].viewBox.baseVal.width)+','+(1/svgElm[0].viewBox.baseVal.height)+')');
var bgPrev=prevSection.css('background-image');
var patternPrevClip=document.createElement('div');
$(patternPrevClip).addClass('pattern-prev-clip').css({'-webkit-clip-path': 'url(#pattern_top_clip_'+clipID+')','clip-path': 'url(#pattern_top_clip_'+clipID+')'});
// $(patternPrevClip).addClass('pattern-prev-clip').css('background-image', bgPrev);
prevSection.append(patternPrevClip);
var blockContent=document.createElement('div');
$(blockContent).addClass('block-content');
$(patternPrevClip).before(blockContent);
}
var baseHeight=svgElm.height()/svgElm[0].viewBox.baseVal.height;
// console.log(svgElm.height()+" - "+svgElm[0].viewBox.baseVal.height);
var ppcHeightTop=parseInt(parentSection.find('svg #pattern_top')[0].getAttribute('height'))*baseHeight;
var ppcHeightBottom=parseInt(parentSection.find('svg #pattern_bottom')[0].getAttribute('height'))*baseHeight;
if(prevSection.find('svg').length>0){
var basePrevHeight=prevSection.find('svg').height()/prevSection.find('svg')[0].viewBox.baseVal.height;
var ppcPrevHeightBottom=parseInt(prevSection.find('svg #pattern_bottom')[0].getAttribute('height'))*basePrevHeight;
}
// parentSection.css({'top':(svgElm.height()-ppcHeightTop)+'px'});
prevSection.find('.pattern-prev-clip').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'}).attr('height',svgHeight);
if(parentSection.find('.pattern-bottom-clip').length<=0){
parentSection.find('svg #pattern_bottom').attr('transform','scale('+(1/svgElm[0].viewBox.baseVal.width)+','+(1/svgElm[0].viewBox.baseVal.height)+')');
var bg=parentSection.css('background-image');
var patternTopClip=document.createElement('div');
$(patternTopClip).addClass('top-clip pattern-bottom-clip').css({'background-image': bg,'-webkit-clip-path': 'url(#pattern_bottom_clip_'+clipID+')','clip-path': 'url(#pattern_bottom_clip_'+clipID+')'});
svgElm.before(patternTopClip);
}
parentSection.find('.pattern-bottom-clip').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'}).attr('height',svgHeight);
// console.log("prev section id: "+(ppcPrevHeightBottom ?? 0));
// console.log(((svgElm.height()-ppcHeightTop) + prevSection.find('.pattern-prev-clip').height()));
// prevSection.find('.content').css('min-height',prevSection.height() - ((svgElm.height()-ppcHeightTop)) );
//
// prevSection.css('min-height', (prevSection.find('.pattern-prev-clip').height() + prevSection.find('.content').outerHeight()) - (ppcPrevHeightBottom ?? 0) );
var prevBlockContentHeight=(prevSection.find('.content').outerHeight() - ppcHeightTop) - (ppcPrevHeightBottom ?? 0);
// prevBlockContentHeight=prevBlockContentHeight>200?prevBlockContentHeight:200;
prevSection.find('.block-content').css('height', prevBlockContentHeight).attr('height',prevBlockContentHeight);
parentSection.find('.content').css('top','-'+ppcHeightBottom+'px');
// parentSection.find('.pattern-bottom-clip').css('background-size','auto '+parentSection.find('.pattern-prev-clip').attr('height')+'px');
// console.log(prevSection.find('.pattern-prev-clip').css('height'));
// prevSection.find('.pattern-bottom-clip').css('background-size','auto '+(parseFloat(prevSection.find('.pattern-prev-clip').attr('height')) + parseFloat(prevSection.find('.block-content').attr('height')) )+'px');
var bgPrevHeight=(
parseFloat(prevSection.find('.pattern-prev-clip').attr('height'))
+
parseFloat(prevSection.find('.block-content').attr('height'))
+
parseFloat( (prevSection.find('.pattern-bottom-clip').attr('height') ?? 0) )
);
prevSection.css({'background-size':'auto '+ bgPrevHeight +'px'});
prevSection.find('.pattern-bottom-clip').css('background-size','auto '+ bgPrevHeight +'px');
if($('.section').last().attr('data-clip-id') == clipID){
if(parentSection.find('.block-content').length<=0){
var blockContent=document.createElement('div');
$(blockContent).addClass('block-content');
parentSection.append(blockContent);
}
var lastBlockContent=(parentSection.find('.content').outerHeight() - ppcHeightBottom);
lastBlockContent=(lastBlockContent > 0 ? lastBlockContent : 100);
parentSection.find('.block-content').css('min-height', lastBlockContent ).attr('height',lastBlockContent);
var bgHeight=(
parseFloat(parentSection.find('.block-content').attr('height'))
+
parseFloat(parentSection.find('.pattern-bottom-clip').attr('height'))
);
parentSection.css({'background-size':'auto '+ bgHeight +'px'});
parentSection.find('.pattern-bottom-clip').css('background-size','auto '+ bgHeight +'px');
}
// prevSection.css('min-height',prevSection.height()-(svgElm.height()-ppcHeightTop));
var prevSvgHeight=prevSection.find('svg').height();
if(prevSection.find('.pattern-bottom-clip').nextAll('.pattern-prev-clip').length>0){
$(patternPrevClip).css('background-position-y', '-'+prevSvgHeight+'px');
}else{
$(patternPrevClip).addClass('pattern-prev-clip').css('background-position-y', '-'+prevSection.find('.content').innerHeight()+'px');
}
}
$(document).ready(function(){
$('.img-arc').each(function(){
SVGInject(this);
})
})
$(window).on('resize',function(){
svgInjectElements.forEach(function(svg){
loadSVGInject(svg);
})
// $('section svg').each(function(){
// var svgElm=$(this);
// var svgHeight=svgElm.height();
// svgElm.parents('section').css({'background-position-y':'-'+svgHeight+'px'});
// svgElm.parents('section').find('.arc-overlay').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});
// svgElm.parents('section').find('svg').css({'top':'-'+(svgHeight-1)+'px',});
// })
})
</script>
</head>
<body>
<section class="section" data-clip-id="1" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-3/pattern_bg1.jpg);">
<div class="content">
<div style="padding: 0 40px;padding-top: 50px">
<div class="cnt-1" style="color: #EBEBEB;padding: 0 40px;">
<h1>ECOLOGICAL PRODUCTION</h1>
<div style="padding: 20px;float: right"><img src="https://demo.zhardsoft.com/arc-pattern-3/img1.png" style="max-width: 300px"></div>
We recycle all organic waste we produce, also, we obtain organic waste from other farms, restaurants, and food markets. The organic waste we collect allows a particular larva from the Hermetia illucens species, known commonly as black soldier fly larva (BSFL), to feeds on it and grow fatter. When the larva has developed to a pupa, it is cleaned, cooked and grided to a paste used as a high-quality protein and lipids perfectly suited as ecological animal feed, reducing the need for wild-sourced feed ingredients such as fishmeal which contributes to the global overfishing.</div>
</div>
<div style="padding: 0 40px;padding-top: 50px">
<div class="cnt-1" style="color: #EBEBEB;padding: 0 40px;">
<div style="padding: 20px;float: left"><img src="https://demo.zhardsoft.com/arc-pattern-3/img1.png" style="max-width: 500px"></div>
We recycle all organic waste we produce, also, we obtain organic waste from other farms, restaurants, and food markets. The organic waste we collect allows a particular larva from the Hermetia illucens species, known commonly as black soldier fly larva (BSFL), to feeds on it and grow fatter. When the larva has developed to a pupa, it is cleaned, cooked and grided to a paste used as a high-quality protein and lipids perfectly suited as ecological animal feed, reducing the need for wild-sourced feed ingredients such as fishmeal which contributes to the global overfishing.</div>
</div>
</div>
</section>
<section class="section" data-clip-id="2" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-3/pattern_bg2.jpg);">
<div class="content">
<div style="padding: 0 40px;padding-bottom: 60px">
<div class="cnt-1" style="color: #EBEBEB;text-align: right;flex-grow: 1">
<h1 style="color: #FDC403">LOCAL COMMUNITY<br>ENGAGEMENT.</h1>
It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
</div>
</div>
</div>
<!-- <img src="arc_1.svg" onload="SVGInject(this);"/> -->
<img img-arc="1" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-3/arc_1.svg"/>
</section>
<section class="section" data-clip-id="3" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-3/pattern_bg3.jpg);">
<div class="content">
<div style="padding: 0 40px;padding-top: 50px">
<div class="cnt-1" style="color: #EBEBEB;text-align: center;flex-grow: 1">
<h1 style="color: #FDC403">LOCAL COMMUNITY<br>ENGAGEMENT. 2</h1>
It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
<img src="https://demo.zhardsoft.com/arc-pattern-3/img1.png" style="max-width: 400px">
</div>
</div>
</div>
<img img-arc="2" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-3/arc_2.svg"/>
</section>
<section class="section" data-clip-id="4" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-3/pattern_bg4.jpg);">
<div class="content">
<div style="padding: 0 40px;padding-top: 50px">
<div class="cnt-1" style="color: #EBEBEB;text-align: left;">
<p><h1 style="color: #FDC403">LOCAL COMMUNITY<br/>ENGAGEMENT. 3</h1>
<img src="https://demo.zhardsoft.com/arc-pattern-3/img1.png" style="float: right;max-width: 500px;padding: 0 40px">
It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
</p>
</div>
</div>
</div>
<img img-arc="3" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-3/arc_3.svg"/>
</section>
</body>
</html>This is the code that I have improved from my previous post, please check it
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jax-p |
| Solution 2 | Rahmat Dani Zaki |
| Solution 3 | rabin |
| Solution 4 | rabin |
| Solution 5 | user2334682 |
| Solution 6 | |
| Solution 7 | rabin |
| Solution 8 | anil singh butola |
| Solution 9 |