CODEWITHSUNDEEP
htmlcss
user3245569
user3245569

Reputation: 13

HTML: How to add an image using CSS as linked style sheet

Here's my code. I'm trying to add an image called lg.png into the HTML and be able to edit the length/width in the css file. The lg.png is located in the same folder as the index.html and styles.css

Tried looking online for this answer but can't seem to get any luck.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<head>
    <title>yournetid</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css"/>   
</head>
<img id="my_image" src="lg.png" alt="image error"/>

        &nbsp;
<body>
    <p>
        Here's some awesome pictures!
    </p>
</body>

CSS:

body {

}

img#lg background:url(lg.png); width:200px; height:100px;

Upvotes: 1

Views: 35017

Answers (2)

dev7
dev7

Reputation: 6369

You are trying to use CSS selector img#lg which makes no sense. You are telling CSS to look for an image with id of 'lg' but you did not set any id to your image.

Also, setting the background-image:ur(lg.png) is not the same as <img src='lg.png'>.

To fix it:

  1. Add id to your image
  2. Target the id in your CSS.

Change your HTML:

 <img id="my_image" src="lg.png" alt="image error">

CSS:

#my_image {width:200px; height:100px; }

If you wanted to change CSS properties of ALL images, you'd use the following:

img {width:200px; height:100px; }

Hope this helps!

Upvotes: 3

sundance
sundance

Reputation: 2945

Use a div and set the background property:

HTML:

<div class="my_image"></div>

CSS:

.my_image
{
    background:URL('path/to/img.png');
    width:100px;
    height:100px;
}

Upvotes: 4

Related Questions