I am using Bootstrap 4 and attempting to create an overlay effect with a .png image that masks part of the bottom area of the first section.
The height of the .png image is 130px and it needs to remain unscaled on mobile devices.
I have experimented with using the ::after pseudo-elements with content as a background image on the first section, but this results in an unwanted bottom margin.
You can view my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a more effective way to achieve this?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>