Looking for this: https://i.sstatic.net/zz8lP.png Wanting this (also cropped but symmetrical): https://i.sstatic.net/Wrrlh.png What I currently have: https://i.sstatic.net/S1qtM.png
div.row.separator div.col {
height: 40px;
width: 100%;
padding: 0px;
background-image: url("./images/rhomb.png");
background-repeat: repeat-x;
}
Rhomb pattern background image: https://i.sstatic.net/8aOpi.png
<div class="container-fluid" id="main-content">
<div class="row">
<div class="col">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
luctus eros at maximus tincidunt. Donec fringilla mattis massa,
vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
nec pellentesque convallis, consequat at magna.</p>
</div>
</div>
<div class="row separator">
<div class="col">
</div>
</div>
.......
Background is gray, container is white. Looking to add a row of rhombs as separators after specific sections.
Is it possible to prevent cropping on the last background image or align the first and last cropped images in the center when using a small repeated background image in a div?
UPDATE: Feel free to test with: https://github.com/GhitaB/sample-design-bootstrap4-css (Just for experimentation, not a critical issue for me.)