responsive background

[dinopacha]

Hello all,

I try to make a responsive background.

the background is an image with a baroque print on the left top and the right bottom.

I have done the following, but it does not work.

what I'm doing wrong.. :(

@[member=media] (min-width: 768px) {
  body {
    background: url(images/background.jpg);
  }
}

@[member=media] (min-width: 992px) {
  body {
    background: url(images/background.jpg);
  }
}

@[member=media] (min-width: 1200px) {
  body {
    background: url(images/background.jpg);
  }
}

[MrPhil]

Does anything happen? What are you seeing? Have you tried either adding a background color to the background: property, or changing it to background-image:?

[dinopacha]

@@phil

 

the background shows up, but when I shrink the site the background image will not reduced.

it remains the same size.

So the baroque print disappears from the screen when I shrink the screen size.

but it should also reduce​.

[Dan Cole]

@@dinopacha

 

This might help.

 

http://www.w3schools.com/bootstrap/bootstrap_images.asp

 

Dan

[multimixer]

You are always using the same image, so how can you expect that something change? You need to upload 3 different images

 

Other option is to use the "background-size" property

 

Try for example

body {
  background: url(images/background.jpg);
  background-size: 100% 100%;
  }

Or try

body {
  background: url(images/background.jpg);
  background-size: cover;
  }

Some more reading: https://css-tricks.com/perfect-full-page-background-image/