13 Replies - 1552 Views - Last Post: 09 December 2012 - 07:08 AM

#1 mintzkie009  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 07-July 12

How to do this? Little confused.

Posted 06 December 2012 - 08:24 AM

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.

Posted Image

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.

Is This A Good Question/Topic? 0
  • +

Replies To: How to do this? Little confused.

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 9197
  • View blog
  • Posts: 34,551
  • Joined: 12-June 08

Re: How to do this? Little confused.

Posted 06 December 2012 - 08:27 AM

The image is too small to see.
Was This Post Helpful? 0
  • +
  • -

#3 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6084
  • View blog
  • Posts: 10,521
  • Joined: 28-September 07

Re: How to do this? Little confused.

Posted 06 December 2012 - 08:27 AM

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?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,228
  • Joined: 08-June 10

Re: How to do this? Little confused.

Posted 06 December 2012 - 08:30 AM

yupp, background image on #header.
Was This Post Helpful? 0
  • +
  • -

#5 mintzkie009  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 07-July 12

Re: How to do this? Little confused.

Posted 07 December 2012 - 12:39 AM

sorry for the image quality.

i found the image.

Posted Image

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

btw. thanks for the responses.

my css familiarity still on the beginner's side.
Was This Post Helpful? 0
  • +
  • -

#6 mintzkie009  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 07-July 12

Re: How to do this? Little confused.

Posted 07 December 2012 - 11:11 AM

btw. what is the difference in using html <img> and css background-image?
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: How to do this? Little confused.

Posted 07 December 2012 - 11:28 AM

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

Was This Post Helpful? 0
  • +
  • -

#8 mgaines2  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 06-December 12

Re: How to do this? Little confused.

Posted 07 December 2012 - 01:37 PM

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.
Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: How to do this? Little confused.

Posted 07 December 2012 - 01:53 PM

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.)
Was This Post Helpful? 1
  • +
  • -

#10 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6084
  • View blog
  • Posts: 10,521
  • Joined: 28-September 07

Re: How to do this? Little confused.

Posted 07 December 2012 - 02:07 PM

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.
Was This Post Helpful? 0
  • +
  • -

#11 mintzkie009  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 07-July 12

Re: How to do this? Little confused.

Posted 08 December 2012 - 07:03 AM

@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. :sweatdrop: thanks for advices.
Was This Post Helpful? 0
  • +
  • -

#12 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6084
  • View blog
  • Posts: 10,521
  • Joined: 28-September 07

Re: How to do this? Little confused.

Posted 08 December 2012 - 07:43 AM

What browser are you using?
Was This Post Helpful? 0
  • +
  • -

#13 mintzkie009  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 07-July 12

Re: How to do this? Little confused.

Posted 09 December 2012 - 04:48 AM

chrome
Was This Post Helpful? 0
  • +
  • -

#14 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6084
  • View blog
  • Posts: 10,521
  • Joined: 28-September 07

Re: How to do this? Little confused.

Posted 09 December 2012 - 07:08 AM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1