/    Sign up×
Community /Pin to ProfileBookmark

need help getting an image to fit in a cell

Copy linkTweet thisAlerts:
Feb 21.2012

i need to make a calender for class and one of the things the professor wants us to do is have some images so i have images i want to use for each of the holidays. however i cant seem to get the image to fit in the cell of the table. the image is really big and i cant figure out how to make the image smaller to fit the cell. i want the image to be the background of the cell so that my text is on top of the image. i have tried using <img src= “images/newyearday.jpg” height=”50″ width =”50″ /> this puts the image in the cell and allows me to change the size of the image however the image is not the background and the text just moves around the image. so i have to use
background=”images/newyearday.jpg”

this sets it as the background but i can not figure out how to change the size of the image so that i see more than just a small part of the image.

heres the part of the code where this is located.

<tr height=”15%”>
<td>&nbsp</td>
<td>&nbsp</td>
<td bgcolor= “orange” width=”15%” background=”images/newyearday.jpg”> 1: <br/>New Years Day</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>

i have to use notepad for class so i can not use this in dreamweaver. ive tried adding height and width inside and outside the background qoutes and it still does not change the size of the image. can someone please help me find out what im doing wrong? also i would like the code to work not only in IE but also FireFox as i have to use FireFox on my laptop where i do 95% of my work, and IE when im in class.

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@cbVisionFeb 21.2012 — You'll want to re-size the image in a program like Photoshop or GIMP. Make it the size you want, then save it and use that new image.
Copy linkTweet thisAlerts:
@jadhav_somaFeb 22.2012 — you need add style like this.....

{

background-repeat: no-repeat;

background-size: 50%;

}

below is the your code...

<tr height="15%">

<td>&nbsp</td>

<td>&nbsp</td>

<td bgcolor= "orange" width="15%" background="images/newyearday.jpg" style=" background-repeat:no-repeat;background-size:50%"> 1: <br/>New Years Day</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

Thanks,

Som
Copy linkTweet thisAlerts:
@genova90authorFeb 22.2012 — thank you cbVision for your answer however i was hoping more for code i could use. i really dont want to resize the images that i have because im not even sure what the size of my cells are, not to mention i dont have either of those programs. photoshop i know costs money which i dont have alot of and sad to say i dont have to room on my laptop to install it if i did.

also thank you as will jadhav.soma for your answer, i tried the background style you gave me however it didnt change anything. im still only getting a small part of the image that im wanting.

here is a screen shot of my page http://i1212.photobucket.com/albums/cc450/benji31/jan.jpg

here is the image http://i1212.photobucket.com/albums/cc450/benji31/newyearday.jpg
Copy linkTweet thisAlerts:
@genova90authorFeb 23.2012 — thank you but i can not resize images and i tried the code and it did not work.
Copy linkTweet thisAlerts:
@jadhav_somaFeb 23.2012 — can you share a link?
Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 23.2012 — [code=html]
<style>
#cell{
background-repeat: no-repeat;
background-color: gray;
background-image: url('images/newyearday.jpg');
background-size: 100% 100%;
}
</style>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

<td id="cell"> 1: <br/>New Year's Day</td>

<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
[/code]

Note: The 'background-size' property is a CSS3 proprietary feature. So, it is not supported in IE (I hate IE!) but works fine in Firefox, Chrome etc.

So, if this is not the type of answer you are searching then you must follow the statement of 'cbVision'.
Copy linkTweet thisAlerts:
@WyCnetFeb 23.2012 — It sounds like you need JavaScript support. If your calendar is resizable, then you should add your photo after the initial div/tabular/text rendering.

(1) Find the width and height of the element where the photo goes.

(2) Set the image attrbutes to them.

(3) Insert the image.

If you have prepared the document at the server, then without JS support, your calendar is not resizable, and your width and heights should be part of the style as "style="width:20px;height:20px", [/quote]without spaces between the number and its unit!
Copy linkTweet thisAlerts:
@cbVisionFeb 23.2012 — You need an image editing software if you are wanting to learn how to change and create websites. It's just as important as the coding side.

You basically have 3 options:

  • - Resize the image

  • - Don't use a background image, and size it down with CSS

  • - Use background-size, which isn't supported by all browsers
    • ×

    Success!

    Help @genova90 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...