How to minimize the image to set on mobile

Question

I using below URL to set the background image:

https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png

body { background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png"); 
background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3A3F50;
}

With this i am able to set the background correctly in the browser but the same screen if i see in mobile i am not able to see the full image since it is not setting or rendering based on the screen size.

Is there a way to display the same image in browser and mobile or can i minimize the above image to certain dimension and display on mobile ?

you want the image to fit a mobile screen 100% or half, i've seen your image it's only about quarter of the screen? — codefather, Apr 04 '20 at 08:57

codefather · Accepted Answer · 2020-04-04T10:12:02.297

If you want the image to scale both up and down on mobile screens, set the css width property to 100% and height to auto:

.image_class {
  width: 100%;
  height: auto;
}

If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.image_name {
  max-width: 100%;
  height: auto;
}

If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice:

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

in your case, your image seems to be within the body tag, in the first case

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

this will span the image across the entire page, but with your image https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png it seems that the dimensions are smaller hence the image might become blurry but nevertheless, on a mobile device it will resize according to the viewport in the second scenario, you can have something like this

body {
  background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3a3f50;
  width: 100%;
  height: auto;
}

the image will take 100% width both on large and small screens, meaning that on a mobile device the image will resize to 100% of the container

also you can use viewport height and widths, this will ensure that the image spans the whole page depending on your width and height value, you can also check the mobile viewports to see how you can set dimensions for mobile screens

i hope this helps

i am so sorry sir @codefather, i am not html css guy if you dont mind can you please help me out where to add, I want the same image to be set both in broswer and mobile — Abdul Azeez, Apr 04 '20 at 09:52

score 1 · Answer 2 · answered Apr 04 '20 at 10:12

If percentage(%) is not working, you can use vh(view port height) and vw(view port width) to set background size

body {
 background-image: url("https://postcron.com/en/blog/wp-content/uploads/2014/03/Untitled-design-2.png");
 background-size: 100vw 100vh;
}

you can preview Here

How to minimize the image to set on mobile

2 Answers2