CSS - media queries

You have to re-size images according to you mobile device width.You can do this using any image editing application.For example:-

<html lang="en">

<head>

        <meta charset="utf-8">

        <title>Mobile Sitetitle>

        <style>

        #image {

        background-image: url(largeimage.jpg);

        }

        @media only screen and (max-width: 320px) {

                #image {

                background-image: url(smallimage.jpg);

                }

        }

        style>

head>

<body>

<div id="image">div>

body>

html>

In this example we are using largeimage.jpg for desktop version of website and using smallimage.jpg for mobile website(max-width:320px ) using media query.
Hope this will help you.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Anoop Kumar Sharma13y ago
You have to re-size images according to you mobile device width.You can do this using any image editing application.For example:-

<html lang="en">

<head>

        <meta charset="utf-8">

        <title>Mobile Sitetitle>

        <style>

        #image {

        background-image: url(largeimage.jpg);

        }

        @media only screen and (max-width: 320px) {

                #image {

                background-image: url(smallimage.jpg);

                }

        }

        style>

head>

<body>

<div id="image">div>

body>

html>

In this example we are using largeimage.jpg for desktop version of website and using smallimage.jpg for mobile website(max-width:320px ) using media query.
Hope this will help you.
0