Change image based on screen size.

[greeley]

I'm really stuck on this, i have a blasting headache which is not helping and i'm not the best when it comes to HTML or Javascript (I'm more of a CSS person)

Basically i have a page with a banner on and i'm wanting to change the banner to a different image when the screen is smaller (so basically when they are on a phone, they get the smaller image, but when they are on a laptop with a bigger screen/resolution, they get a full banner) but i am completely stuck on how to change this.....

Any ideas?

So far i have the @media screen and (max-width: 768px) { for the CSS when the screen changes, thats fine. But i'm completely stuck on what function i'd need for the image to change when the resolution is smaller.

I'd say that i'm between basic and average when it comes to this stuff. I'd be able to read what you put but have no idea how to start it myself.

[GiGaBiTe]

Just use browser detection with javascript and write different layouts for the different browsers you want to target.

[itsMaru]

if you want to change the image based on the screen res, then you have two options.

background-image, change them based on the current screen res, or
content, so it's like element{content: url("path-to-image.jpg");}.
just beware of this, there are some problems you must consider:

you're (probably) better off removing the src attribute off the img element in the html then.
depending on the way the page is serving the files, the CSS is being sent asynchronously and thus will reload another image depending on the res if you don't take it src off.

of course there's another problem to this, IE8 can't load media-queries. beware of this when using mediaqueries, there are multiple solutions to it.

by the way, the background-image solution isn't really recommended since there's not really a content to expand the dimensions of the element. unless, of course, you have something else inside it or set the dimensions manually in the CSS, but then it's not really responsive.