CSS Issue with background image

Question

I have an interactive webpage.

The body element has a background image. As soon as new elements are added on the page, the image stretches and I don't want this behaviour.

How do I get this fixed.

<style>
     body {
         background-image : url(./image.jpg);
         background-size: cover;
     }
</style>

<body>
      <section>
            ... dynamic elements
      </section>
</body>

`background-size:cover` means that the image will stretch to fill its container both horizontally and vertically. If that's not what you want, can you explain what you _do_ want to happen? Maybe a larger image will help. — Mr Lister, Jun 15 '19 at 11:00
Please refer this https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch — Hardik Leuwa, Jun 15 '19 at 11:50

score 1 · Accepted Answer · answered Jun 15 '19 at 11:52

remove background-size: cover; from your css, because cover property is to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. So instead of cover try to set background size as px or %.

If you want to stretch horizontal and not vertical try the below code

background-size: 100% 50%;

Eg:- background-size:width(px or % or vw) height(px or % or vh)

score -1 · Answer 2 · answered Jun 15 '19 at 10:43

-1

Add background-repeat: no-repeat; in body styling.

answered Jun 15 '19 at 10:43

Ravi Pandit

1
2

I tried that, the background image still zoom in when a button is clicked to add new elements – Joshua Jun 15 '19 at 10:47
`no-repeat` will have no effect in this case, since `background-size:cover` will ensure there is only one instance of the image visible. – Mr Lister Jun 15 '19 at 10:58
In that case, why don't you give a specific size to the background image? 'height:500px; width:900px;' – Ravi Pandit Jun 15 '19 at 10:59

CSS Issue with background image

2 Answers2