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

Question

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;

background image of image? take a div instead of the image and do that. — Ashish Kumar
– Ashish Kumar, Commented Jan 28, 2014 at 17:29
Is it a valid vanilla CSS? You can't nest styles (img#lg is inside body) BTW img#lg won't match your image (because it has not lg id). — Adriano Repetti
– Adriano Repetti, Commented Jan 28, 2014 at 17:29
You need to fix the opening body tag and I see no link in the HTML file to the CSS file. — j08691
– j08691, Commented Jan 28, 2014 at 17:31

sundance · Accepted Answer · 2014-01-28 17:29:33Z

4

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;
}

answered Jan 28, 2014 at 17:29

sundance

2,9554 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3245569 Over a year ago

Made some changes to what I'm currently working with, still stumped on where to go in the right direction since the image still isn't showing up

dev7 · Accepted Answer · 2014-01-28 17:36:49Z

3

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:

Add id to your image
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!

edited Jan 28, 2014 at 17:36

answered Jan 28, 2014 at 17:31

dev7

6,4196 gold badges36 silver badges68 bronze badges

7 Comments

user3245569 Over a year ago

Thank you for your help, I'm still getting a couple errors, as it's not displaying the image. Error: "In XHTML 1.0 Strict the tag <html> cannot contain tag <img>

dev7 Over a year ago

@user3245569 where is the image located? is it in the same folder of the HTML or a subfolder?

user3245569 Over a year ago

It's in the same folder as the html file.

user3245569 Over a year ago

I also updated the original post with what I'm currently working with.

dev7 Over a year ago

@user3245569 why are you using strict xhtml? and not simply <!DOCTYPE html>?

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related