Question 193740 in Html Question posted in
Some basic documentation can be found here.

Html – responsive background with min and max

I want make a responsive background with image when I used background-size: contain; in small screen that was awesome but in large screen my image is too large. how I can Determine maximum width and height just using HTML and CSS.

Tags:

2

Answers


  1. 0

    You can use a media query to switch background-size depending on screen size. For example, if your image is 640px wide:

    body {
  min-height: 100vh;
  background-image: url(http://placekitten.com/640/480);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

@media(min-width: 640px) {
  body {
    background-size: auto;
  }
}
    Login or Signup to reply.
  2. 0

    You can use media queries in your css.

    @media (background-size: contain){
    // rules for when the background-size: contain is applied
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search