[mintzkie009]

Hello guys, I am a beginner web designing and development. While making my simple website, I visit anime44.com to download a few anime while coding. Then I just inspect the elements/source code of the site (as I always do for references, etc.) then I noticed that the image is not on the <img> tag, but I'm pretty sure it's an image. I uploaded a screenshot so that you guys can see it.

Here is the screenshot.



It shows that the image is just on the <div> tag with an id but the <img> tag is nowhere to find.

I am just a bit of confused. Anyone can help me sort this out.

Thank you in advance and please bear with me, I'm just learning web designing/developing for the time being.

[modi123_1]

The image is too small to see.

[BenignDesign]

Your screenshot is too small to read... but I would wager what you're seeing is the image used as a background within the div. What's you level of familiarity with CSS?

[Dormilich]

yupp, background image on #header.

[mintzkie009]

sorry for the image quality.

i found the image.



your right guys, it's on the css of the div #header. "i never thought that css can do the image job." />

btw. thanks for the responses.

my css familiarity still on the beginner's side.

[mintzkie009]

btw. what is the difference in using html <img> and css background-image?

[Atli]

To set or alter the source of the image shown in an <img> tag, you have to edit the HTML. To set or alter an image set in CSS, you don't.

Imagine having a site that allows users to select between several preset themes you've created. If you use a CSS background image, you can switch an image by switching which CSS stylesheet is loaded. There would be no need for Javascript or server-side scripting in order to update the actual HTML. The HTML could remain the same for all themes.

(Though, you'd need JS or a server-side script to switch the CSS files, but each CSS sheet would probably use multiple images, or simply not use images for some parts of the site. Switching the CSS is far simpler than updating the entire DOM by hand.)

This post has been edited by Atli: 07 December 2012 - 11:30 AM

[mgaines2]

I am pretty sure that a css background image will size it to fit the size of the screen. Where, on just using <img> tags, u must specify what you want the height and width to be and it does not change with size of the screen, it only changes in accordance with proportions.

[Atli]

Actually no, mgaines2. A CSS background image will not resize to fit it's assigned element. In fact, before CSS3 I don't remember there being any way to actually scale background images. You could only position them. CSS3 introduced the background-size style to correct that, but as with most CSS3 styles it only works in later versions of the browsers. (There is a compatibility chart on the page I linked to.)

[BenignDesign]

You can tile a background in CSS so it fills the entire browser... I'd recommend using this sparingly and with images specifically designed to be seamlessly tiled... otherwise you end up with a geocities circa 1995 effect... and there ain't no one wants to see that.

[mintzkie009]

@atli... so the css image is suitable for theme purposes cause you don't have to change the html tag content itself. only the stylesheet.

i haven't used images on css since i started learning web des/dev. i think i'll give it a try, images in css i think will save some of the time changing a certain images that is stationary or never changing in the site. and one thing that i noticed, i can't save the image file when i right click on the image when using css image. i think there is some advance details about that. thanks for advices.

[BenignDesign]

What browser are you using?

[mintzkie009]

chrome

[BenignDesign]

If you inspect the element, copy the URL from the CSS, paste in your address bar.. you should then be able to right click on the image and save it to your machine.