Background with SVG

Hi,

I’m working on a project and want to add a tire track as background for certain DIVs.
Please check out here: http://durobo.de/test/test/

How can I realize it that the track is behind the text, but it is only inside the DIV and not beyond the borders of the DIV?

Who could give me some tips?

Thank you in advance

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

Looks nice … any chance to get the Blocs file to look how you do that?

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

1 Like

Thank you :slight_smile:

you’re welcome - if there is something you don’t understand, post again.

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.

Yes SVG but are they compatible with all browsers yet? Can I use... Support tables for HTML5, CSS3, etc

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.

I think if I read that SVG chart link I posted correctly , it’s 97%…that’s good enough. :slight_smile:

Hey Guys,

thanks for your support. I willl make some test and i will try out the “fallback” method. A Complete Guide to SVG Fallbacks | CSS-Tricks - CSS-Tricks

Have a nice evening.