-4

I want to use some images as backgrounds but I have no control over the images. If the images are 500px x 500px , is it possible with just CSS3 to scale the image down to 200px x 200px and then only use 100px x 100px from the center?

tommyd456
  • 10,443
  • 26
  • 89
  • 163
  • Can you create a jsfiddle for this with some images and your code. – frnt Jun 12 '16 at 15:14
  • 2
    It is possible to resize images in CSS, yes. However there are already several questions regarding this and this kind of information is pretty easily accessible just by searching it. Try adding `width:100%; height:auto;` to your div's CSS and the image should resize beautifully. – shaun Jun 12 '16 at 15:14
  • Take a look at this [post](http://stackoverflow.com/questions/7864448/background-size-in-shorthand-background-property-css3) it might point you in the right direction. – Jonathan Eustace Jun 12 '16 at 15:16
  • Feel free to close if you wish – tommyd456 Jun 12 '16 at 15:42
  • No problem - I should have researched more carefully on this one. I would delete but there are already answers. – tommyd456 Jun 12 '16 at 15:50
  • @tommyd456: If you yourself feel that it is a dupe, please feel free to unaccept, remove the vote and delete it.I wouldn't mind :) – Harry Jun 12 '16 at 15:51
  • I will delete but my vote is locked in on @renzz17 answer – tommyd456 Jun 12 '16 at 15:54

1 Answers1

1

You could use something like this:

div {
width:100px;
height:100px;
background-size: 200px 200px;
background-position: center; 
background-image: 'your image here';
}
Rens
  • 478
  • 2
  • 8
  • 13