Positioning and scaling a background image responsively for a full-screen width div

user_8109438 0
Viewed 36

Here is what I have: An SVG of dimensions 1920*1920 pixels (https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg)

Here's what I need:

  1. I will be using this as a background-image to for a div taking full width of screen.
  2. This background-image for the div needs to be responsive.
  3. A MUST is having the top of the background visible at all screen sizes i.e. background-image should start at top of the image.
  4. Should not repeat.

(The idea is to show the background of the sea which is designed and linked as seen above.)

Here's what I've tried:

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 a lot of rules mentioned in the "What I need" section that aren't adhered. Must be simpler than I think it is, but I'd love it if someone could help. I'm using React, but I don't think that should mattter for this.

reactjs background-image svg css
1 Answers

a few mistake :

  • bottom an top annihilate each other since it is equal to 100% and 0% for the vertical axis .. horizontal axis is not define background shorthand is here invalid and won't even show the background-image.

  • background-size : 100% auto , should be fine enough setting only the horizontal sizing.

demo of what i believe you try to do:

body {
  padding: 20px;
}

div{
  height: 1000px;
  background: url(https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg) top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div>
</div>

user_24420990
Related