CSS image?

stefanmz · April 28, 2021

Hey,just wondering if I want to put an image with CSS not <img> do I only do it as a background-image to an element with the background-image:url(url here) thing or is there another CSS instruction that can put an image into the html without using the <img> tag? Don't ask why I know it's weird I'll explain later.

pythonmegapixel · April 28, 2021

Yes, you can do this, but it's a dreadful idea.

In your HTML just do:

<div id="image1" />

Then in CSS:

#image1 {
	background-image:url("https://url/to/your/image");
}

Why is it a terrible idea? Well, if you just put the above code into your site, you'll notice it doesn't work. The reason is that a div can't auto-resize to the size of its background image. So you have then have to add to your CSS the specific size of your image:

#image1 {
	background-image:url("https://url/to/your/image");
    	width: [whatever]px;
    	height: [whatever]px;
    
}

This is very bad practice, for a number of reasons:

You now can't change the image without changing the CSS
If a user tries to print the site, the browser will hide your images, because they are considered background images rather than proper content
You now can't provide alt attributes which is terrible for people using screen readers

I know you said don't ask, but why can't you use an <img> tag? Maybe if you explain, we can find you a better solution.

stefanmz · April 28, 2021

3 minutes ago, pythonmegapixel said:
Yes, you can do this, but it's a dreadful idea.

In your HTML just do:
<div id="image1" />
Then in CSS:
#image1 {
	background-image:url("https://url/to/your/image");
}
Why is it a terrible idea? Well, if you just put the above code into your site, you'll notice it doesn't work. The reason is that a div can't auto-resize to the size of its background image. So you have then have to add to your CSS the specific size of your image:
#image1 {
	background-image:url("https://url/to/your/image");
    	width: [whatever]px;
    	height: [whatever]px;
    
}
This is very bad practice, for a number of reasons:

You now can't change the image without changing the CSS

If a user tries to print the site, the browser will hide your images, because they are considered background images rather than proper content

You now can't provide alt attributes which is terrible for people using screen readers

I know you said don't ask, but why can't you use an <img> tag? Maybe if you explain, we can find you a better solution.

Well I don't know my homework assignments are weird. "Button images and flag images must be linked through the CSS file." this is what it says. Do you think he means do it completely in CSS or just style it in CSS? I might have misunderstood. I mean if it's so bad I am using the <img> tag anyway I would have never thought doing it the other way myself. So what do you think about my assignment? How do you understand it?

pythonmegapixel · April 28, 2021

14 minutes ago, stefanmz said:

Well I don't know my homework assignments are weird. "Button images and flag images must be linked through the CSS file." this is what it says. Do you think he means do it completely in CSS or just style it in CSS? I might have misunderstood. I mean if it's so bad I am using the <img> tag anyway I would have never thought doing it the other way myself. So what do you think about my assignment? How do you understand it?

Oh right, if it's a button and you're going to have text in the button as well, that makes a little more sense. I thought you were talking about just inserting an image into the page. You should be fine to just give the button an ID and then use a background-image CSS attribute on that ID, as described above (and you shouldn't need to set the width and height)

Oh, and if you ever need to use the IMG tag in the future, the syntax is pretty simple:

<img src="path/to/image" alt="Short description of the image (for those using screen-readers)" />

stefanmz · April 28, 2021

3 hours ago, pythonmegapixel said:
Oh right, if it's a button and you're going to have text in the button as well, that makes a little more sense. I thought you were talking about just inserting an image into the page. You should be fine to just give the button an ID and then use a background-image CSS attribute on that ID, as described above (and you shouldn't need to set the width and height)

Oh, and if you ever need to use the IMG tag in the future, the syntax is pretty simple:
<img src="path/to/image" alt="Short description of the image (for those using screen-readers)" />

Thanks! Yeah it makes sense for a button actually. Also I already used the <img> tag many times I actually used only it until recently,never before used the CSS one maybe only for like 1 task. But I haven't done many buttons as well.