On 12/15/10 3:58 PM, TriState Advantage, Kris Jacobson wrote:
<http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/>
was the tutorial I was refering to.
The writer uses this CSS to replace the original graphic with a smaller one.
div#header {
background-image:url (media-queries-phone.jpg);
height: 93px;position: relative; }
How does this then replace the graphic already placed on the page with an img
tag in the html?
Kris
I may be missing something, but in that article I not read that there
was an image in the html that is being replaced.
I think he is just replacing a large background image for
desktop-screens with a smaller background image for mobile devices?
The small screen device [hanset] *reads and obeys* the rulesets in the
media query.
@media only screen and (max-device-width: 480px) {
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
}
Best,
~d
--
http://chelseacreekstudio.com/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
