Image size insode a select/option

HTML & CSS
1

Hi All,

I’d like to display user avatar images in a select/option dropdown and I solved it like :


	select.icon-menu option {
	background-repeat:no-repeat;
	background-position:bottom left;
	padding-left:30px;
	}

and then


<select name="messageTo" id="messageTo" class="icon-menu">
	<?
	while ($row = mysql_fetch_array($q)) {
	?>
	<option style="background:url(../users/uploads/<?=$row['avatar'];?>)" value="<?=$row['user_name'];?>"><?=$row['user_name'];?></option>
<? } ?>

The problem with this that I cannot set the image width and height (READ : I don’t know HOW CAN I do it within CSS…) so only the left upper corner of the image is displayed… I tried to find an example on some forums, with no results so far… Can someone help me? Thanks advanced!

2

well, if you know exactly how big the image is and if all of them are the same size, you can include it in your options tag… otherwise you could perhaps try adding a percentage height…


<select name="messageTo" id="messageTo" class="icon-menu">     <?     while ($row = mysql_fetch_array($q)) {     ?>     <option style="background:url(../users/uploads/<?=$row['avatar'];?>); height:50px; width:50px" value="<?=$row['user_name'];?>"><?=$row['user_name'];?></option> <? } ?>

or for the generic (which i’m not 100% sure if it will work but you could try it)


<select name="messageTo" id="messageTo" class="icon-menu">     <?     while ($row = mysql_fetch_array($q)) {     ?>     <option style="background:url(../users/uploads/<?=$row['avatar'];?>); height:100%; width:100%" value="<?=$row['user_name'];?>"><?=$row['user_name'];?></option> <? } ?>

so just add the height and width tag where you ahve your style background tag :smiley:

3

Thank you MJ Pieterse for your help, however your solution is not working (FF 3.6.12)… :frowning:
I tried both your options, it ‘takes’ the upper left corner of the images and does not scale them to the given width/height…

4

Hi,

The background will only show within the height available to it or within the height set by the content. You could set the height of the option element as mentioned above to cater for the height of the image but I don’t think that’s what you meant.

You would however need to set the image to be background-position:0 0 and not bottom:left as bottom :left will place the bottom of the image at the bottom of the available space and you said you wanted the upper left of the image to be visible.

With css3 you can resize, clip and change background origins but isn’t well supported yet so isn’t really must use here.

Note that I believe that Firefox is the only browsers that will let you place a background image in the option element anyway. You would probably be better off with a javascript replacement for cross browser compatibility.

5

mmm… i see… sorry then…

i don’t really know a lot about option elements so maybe you should rather try the javascript replacement as what Paul O’B mentioned.

Otherwise, if you can add a div inside your element (i don’t know if you can actually even do that at all)


<select name="messageTo" id="messageTo" class="icon-menu">     <?     while ($row = mysql_fetch_array($q)) {     ?>    <div align="left" style="width:50px; height:50px; vertical-align:bottom"> <option style="background:url(../users/uploads/<?=$row['avatar'];?>);" value="<?=$row['user_name'];?>"><?=$row['user_name'];?></option></div> <? } ?>

once again, i don’t know at all but it could be worth a try… well… me not knowing anything about it would have tried it… :smiley:

6

Thank you guys for trying to help me… I think I’ll try do solve this with JS or leave it as is!
Regards

7

oh yes… i actually just saved the whole thing and tried to impement it just using normal elements, but you will have to use js or create a component since it is a form element

sorry…

8

i actually just thought about it… does your image display in any browser?

if it does display in all browsers, you can perhaps try and adjust the hight of your drop down to the image size… that could perhaps work…

otherwise you’ll still have to stick with js which is probably the best solution…