CODEWITHSUNDEEP
html
Mercenary
Mercenary

Reputation: 2166

Change image resolution in html

 <style>
 #text{
 background-image:url('/../image.jpg');
 <<image-resolution:???>>
 }
 </style>

I have a CSS where I use an image as the background. [width = 5000p, height = 3000px, horizontal and vertical resolution = 72dpi] The image appears with a very big size and the pic does not cover the screen completely. Is there a way I can change the size/resolution of the image using image-resolution or any other method?

Upvotes: 1

Views: 6656

Answers (3)

Marco Panichi
Marco Panichi

Reputation: 1185

Tiffon gave you the correct answer. But in the "real world" you'll never use such a big image for a repeated background.

Typical sizes are, for example:

  • 200px X 200px (repeat)
  • 10px X 1000px (repeat-x)
  • 2000px X 10px (repeat-y)

Of course, you have also to consider the weight of the images: 40/50Kb could be an approsimative max size.

In conclusion, instead of use the css rule, I suggest to you to resize and compress (JPG compression, from 50% to 80%) the image. You can do that with software like Paint or FastStone Resizer, a very useful freeware.

Upvotes: 0

tiffon
tiffon

Reputation: 5040

You should be able to use the background-size CSS property to change the size of your image.

 #text{
     background-image:url('/../image.jpg');
     background-size: 100px 100px;
 }

Upvotes: 1

Ravinder Singh
Ravinder Singh

Reputation: 3133

First of all image-resolution tag belongs to css3 and all the browsers might not support this but if you want to do this then try to provide image resolution like this : 

<style>
image-resolution: 72dpi; 
</style>

All the best....

Upvotes: 1

Related Questions