By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,940 Members | 1,391 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,940 IT Pros & Developers. It's quick & easy.

CSS image shrink!

100+
P: 158
I'm trying to "shrink" an image down to size so that my border will fit around it instead of just the top left corner. Any ideas?

Thanks in advance!
Matt
Nov 4 '08 #1
Share this Question
Share on Google+
4 Replies


Death Slaught
100+
P: 1,137
There are several ways to do this I suggest one of the following.

1) You can use an image editing software to shrink the image. I recommend GIMP .

2) Use CSS to adjust the width and height of your image.

If you are using the image as a background image you would have to use the first option. If this doesn't help or you would like an example please post the code you are currently using, and I would be glad to help.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Nov 4 '08 #2

100+
P: 158
Expand|Select|Wrap|Line Numbers
  1.             #Info1 {width: 300px;
  2.                 float: left;
  3.                 height: 12em;
  4.                 position: normal;
  5.                 font-family: arial, sans-serif; 
  6.                 color: black;
  7.                 font-size: .9em;
  8.                 padding-bottom: .5em;
  9.                 text-align: left;
  10.                 border: ridge;
  11.                 border-width: .5em;
  12.                 border-color:  rgb(255,100,0);
  13.                 background-color: transparent;
  14.                 background-image: url("CBTGroup.jpg");
  15.                 background-size: 50%;}
Here is the chunk of code that is dealing with the image. I've tried using height and width set at 50px each where the background-size is used, but didn't seem to work?

Thanks
Nov 4 '08 #3

Death Slaught
100+
P: 1,137
Images are inline elements and while using percentages with the background-size property, it will only work on block-level elements. For more information and examples on using the background-size property click here.

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Nov 4 '08 #4

100+
P: 158
I typed in display: block; and it worked like a charm!

Thanks Death Slaught!!
Nov 6 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.