Solved

Using CSS to set image source

Posted on 2008-06-11
5
995 Views
Last Modified: 2012-06-27
Instead of hardcoding the image into an img tag, I would like to have the image defined in a stylesheet and pull it from there.  How do I go about it?

<td id= 'a' ><img id='b' src ="images/image.jpg;"></td>
0
Comment
Question by:witgrefe
  • 3
  • 2
5 Comments
 
LVL 1

Expert Comment

by:bolt81
ID: 21757997
create css class with the following properity
background-image: url (location of the image);

use background-repeat: no-repeat; to just show it once.
you will need to set a width and hieght for the class to show the image.
0
 

Author Comment

by:witgrefe
ID: 21758072
would this be correct?:
.currentImage {
background-image: url (location of the image);
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
0
 
LVL 1

Expert Comment

by:bolt81
ID: 21758089
if the image size is 20px then yes
0
 

Author Comment

by:witgrefe
ID: 21758128
If I don't know the image size can I just leave out the width and height attributes to have the image rendered at its actual dimensions?
0
 
LVL 1

Accepted Solution

by:
bolt81 earned 50 total points
ID: 22272011
sorry this isn't the case when using a backgroup image. you need to set a size and it will only show what part of the image fits into that size
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
email validation 9 47
Navigation Menu Does Not Show on iPad 4 30
SVG and IE11 2 16
Hide and Unhide Table 6 24
This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question