CODEWITHSUNDEEP
htmlcssimage-rendering
Abdul Azeez
Abdul Azeez

Reputation: 63

How to minimize the image to set on mobile

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 ?

Upvotes: 0

Views: 1135

Answers (2)

Kiran Mistry
Kiran Mistry

Reputation: 2725

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

Upvotes: 1

demon Time
demon Time

Reputation: 130

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

Upvotes: 1

Related Questions