I am making a site about painting and am trying to set a rectangle shaped svg with brushstroke edges as the bg image of my header, footer and some divs within the .
As the screen width increases, the brushstroke edges of the svg remain visible only on the verticle edges of the rectangle. The horizontal edges start to disappear at certain widths. See images - image of how it should look on all screen widths how it looks upon reaching a certain a width
The html:
<div class="container colouredDiv">
<div>
<h2>Some colours need to be mixed on site</h2>
<p>Most of the colours in the catalogues can be found on shop shelves...</p>
</div>
</div>
CSS:
header, footer, .colouredDiv .tip{
background-image: url(illustrations/divBgSvg2.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover; */
}
I have tried changing the background size to contain but that only covers the size of the internal div and doesn't stretch to the full screen width. The .colouredDiv has a max width of none. The code that I have commented out within the CSS somewhat improves it. It doesn't work along the bottom of the rectangle though and the verticle edges come and go on small screen widths.
SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1444.89 629.06"><path d="M35.91 600.24c-.44-.03-.84-.06-1.1-.09 1.03-11.55 1.76-12.5 2.45-11.21.7 1.44 1.39 5.4 2.23 7.16 3.26-.6 4.87-1.32 4.4-2.23l4.25-.06 11.94-.06 30.15-.16c.88 1.7-13.74 2.61-29.35 3.48-3.88.22-7.8.44-11.61.66-1.83.25-3.63.5-5.2.69-3.37.5-6.56 1.07-8.21 1.82h.04ZM847.69 12.56l-7.15-1.26 115.34-1.22-108.19 2.48ZM1439.54 176.17c-1.65-19.34.26-36.11-1.39-55.35l6.74-2.32-5.35 57.68ZM404.7 33.03c-30.52 5.31-108.05 2.48-133.55 6.91 21.03.09 13.78-1.13 18.9-2.04l-40.59-1.73c50.12-3.67 99.4-2.23 155.24-3.14Z" fill="#faeee8"/><g fill="#faeee8"><path d="M1333.87 611.97c2.7-.04 5.35-.09 7.92-.17-3.47.02-6.01.08-7.92.17ZM10.84 266.84c.04.06.08.11.11.16v-.22l-.11.06Z"/><path d="M1443.46 526.84c3.7-77.01-3.63-89.6-4.58-155.48 7.18-117.89-11.06-189.16-9.45-318.35-2.46 45.31-5.61 93.69-6.41 158.33l-3.89-53.53-.03.18V28.77c.1 1.94.2 3.87.29 5.76.33 5.43.62 10.67.92 15.67.58 9.92 1.17 18.81 1.46 26.18 2.16-16.36 3.81-35.16 5.5-65.62-6.63-.31-13.16-.63-19.31-.94-3.23-.19-6.38-.35-9.42-.5-1.54-.09-3.07-.16-4.58-.25-1.13-.09-2.27-.16-3.37-.25-8.35-.69-15.24-1.41-19.75-2.23-9.01-1.63-8.53-3.58 8.83-6.19-70.23-1.57-81.95 1.73-130.65 3.89-24.58-.75-68.11.57-73.9-2.2l-.03-.03c-45.1 2.79-41.44 3.42-110.21.35-47.26.69-92.29 3.49-60.38 5.46l131.31-.25c49.37 4.33-17.15 7.52-37.78 10.2H809.48l52.8-2.79-92.84-.19c16.78-4.14 64.81-9.95-9.12-12.15-119.88 5.75-230.97 11.24-356.3 5.46-61.81-.31-124.28-.5-187.62-.44-31.66.13-63.53.22-95.66.35-35.58.28-71.37.57-107.46.85.15 13.03.33 26.09.51 39.21.18 10.14.4 20.28.62 30.49.51 20.38 1.03 40.91 1.58 61.54 4.07-26.03 2.23 34.25 5.39-14.22.89 7.87 1.66 15.27 2.23 23.19V209c-9.63-56.11-3.83 70.4-12.64 58C12.18 340.15.18 338.82 0 418.3c5.31 47.32 9.16-47.69 11.47-75.04.29 7.5-.11 18.05-.55 28.6 2.95-26.23 8.07-50.89 12.68-58.54v148.46c-4.42.99-8.2 3.35-8.13 22.92-2.97 8.41-2.38 34.88-1.76 61.32.33 13.25.62 26.47.48 37.42-.07 3.2-.11 6.25-.18 9.07-.11 3.36-.22 6.5-.4 9.39-.37 5.78-.88 10.67-1.61 14.29.04 1.16.11 2.32.11 3.45 9.01-.12 17.88-.28 26.64-.41 7.11-.06 14.11-.12 20.99-.19 11.69-.06 23.01.03 34 .19 21.95.31 42.46.91 61.41 1.29 37.92.75 69.58.66 94.12-4.24l73.9 7.79c59.54 2.13 99.58-.82 141.93-2.83 19.12-3.14-45.91-4.74 4.91-8.79 18.54-.72 50.08-1.6 67.93.09 4.84 1.88-19.09 3.14-24.44 3.71 97.2-1.76 164.5 7.03 238.99 11.24 99.33-1.32 237.23 2.6 295.16-3.36l-57.93-.97c84.56-.35 1.83-9.64 96.54-7.63 70.82 2.73 35.83 5.87 40.45 9.48 39.57.44 104.78-2.57 136.11-.28-45.07.79 34.95 3.77 13.78 3.86l-.11.03c73.56 2.1 79.94-3.96 142.52-6.34-4.55-3.58-19.31-9.55-100.21-7.69 12.32-.79 5.33-2.15 15.09-2.63-25.24.36-55.06-.86-74.13-2.18h159.36V294.75l2.31 45.81c3.51 2.54 3.88-51.52 6.85-20.41.58 14.94-1.18 13.66-1.91 16.73l1.83 44.77-7.14 12.97c-7.22 74.5 9.09 118.81 7 215.16 7.21 30.61 10.81-28.38 15.16-46.97l-2.19 9.33c-1.32-11.84-4.11-17.52-2.53-41.66 1.57-24.24 3.11 13.09 4.98-3.64Z"/></g></svg>
I don't know what to do about this. I have been wondering if perhaps the SVG is the problem even. It is one whole shape and not a rectangle with strokes that are not scalable. If anyone could help it would be much appreciated. This is a masters project so I am still getting to grips with all things web. Thank you