# 响应式SVG背景图片

``````<main>
<section>Section A</section>
<section>Section B</section>
<section>Section C</section>
<section>Section D</section>
</main>
``````

My approach so far has been to set the background image on `<main>` with the following code:

``````main {
background-image: url('/path/to/image.svg');
background-position: 40% 76%;
background-size: auto;
background-repeat: no-repeat;
background-attachment: scroll;
background-origin: border-box;
background-clip: border-box;
background-color: #ffffff;
}
``````

1. First, I have to position my background image from the start of `<main>` even though I really only starts at "Section B"
2. Second, which is the biggest problem, I can place my image absolutely with background position as I did above, but it scales very poorly. My image is either not at a proper position nor at a proper scale.