Here is the situation: I have an SVG with dimensions of 1920*1920 pixels ()
This is what I require:
- I intend to use it as a background-image for a div that spans the full width of the screen.
- The background image for the div must be responsive.
- An essential requirement is that the top of the background should always be visible on screens of all sizes, meaning the background-image should start at the top of the image.
- It should not repeat.
(The concept is to display a sea background designed and linked as shown above.)
This is what I've attempted:
body {
padding: 20px;
}
div{
height: 1000px;
background: url(https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg) bottom top;
background-size: 150%;
background-repeat: none;
}<div>
</div>There are several requirements mentioned in the "What I need" section that are not being met. It should be simpler than I am perceiving it to be, but I would appreciate any assistance. I am using React, but I don't believe that should impact this case.