1

I have this code:

HTML:

  <img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>

CSS:

img.d{margin-top:10px;margin-left:20px;}

however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.

Thanks.

Found this

link here

BenMorel
  • 34,448
  • 50
  • 182
  • 322
  • do the images have set heights?, like can they be loaded as background of a element – Ben Sep 08 '11 at 03:34

3 Answers3

2

You can set the image as a background image of an element.

HTML: <div class="d"></div>

CSS: div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}

Kelly Cook
  • 1,261
  • 11
  • 11
  • You'll want to set the width and height of `div.d` to the width and height of the image you want to use. – Kelly Cook Sep 08 '11 at 03:36
  • The 0 0 is for positioning. Yes, you can use this for sprites. It has many uses. This is a good reference: http://www.w3schools.com/css/css_background.asp – Kelly Cook Sep 08 '11 at 03:43
0

One option would be to use e.g. a div-element and attach a background image to it using CSS.

kfuglsang
  • 2,385
  • 2
  • 21
  • 26
0

An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.

That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.

HTML:

<div class="d"></div>

CSS:

div.d {
    display: block;
    background-image: url('i3.jpg');
    width: 100px; /* or whatever it should be */
    height: 100px; /* or whatever it should be */
    margin-top: 10px;
    margin-left: 20px;
}
Matt Stein
  • 3,053
  • 1
  • 19
  • 35
  • The `display` property can be `inline`, `block`, or the somewhat confusing `inline-block`. Ignore the last one for a minute. The difference is how the element flows with the page. Inline content basically fills areas, while block content defines them. Text is typical inline content, since it flows to fill divs, tables, etc. A header or a column would typically be a block element, which will more naturally take dimensions like width and height. You must tell your image `div` to render as a block so you can give it height and width, float it, etc. – Matt Stein Sep 08 '11 at 03:46
  • More here: http://stackoverflow.com/questions/3099030/displayinline-vs-displayblock – Matt Stein Sep 08 '11 at 03:48