This can be done in a number of ways, but I think the simplest is to create your background SVG. complete with it’s background colour. Place this as a bloc background and make it Parallax. You can then put standard text and image brics over the top. You can see an example I made HERE
For your actual site, you could adjust the size and angle of the tyre track layer to suit your needs whilst leaving the background itself as is. Unfortunately, this forum doesn’t allow the uploading of complete projects with their assets, neither will it allow the uploading of a zip file. Therefore, you can download the project zip from HERE
If the text in the big image doesn’t have much SEO importance you could create the graphic in PS or Another image app. But maybe I missed something. Looks great.
I think it’s always best to use text rather than image text. It makes the text very crisp. However, if you want to use an image (maybe a logo or something) you can add an image bric in the bloc instead of a text bric. Ideally, the image you place in the bric should be a transparent png or an svg.
It’s mainly the older IE browsers that don’t support svg - all of the other (including IE-11) do support SVG. There are some mobile browsers still around that don’t correctly scale sag’s but this ca be sorted with some additional CSS. Personally, I wouldn’t worry. The number of incompatible browsers is rapidly decreasing by the day.