How to make banner image responsive in your website

Hi Guys,

Today’s topic is,

How to make banner image responsive in your website!

This tutorial leads you to – creating an Image of your choice responsive. With simple cross browser compatible CSS, you can achieve this. You don’t need any JavaScript nor any jQuery plugin needed to get this done. You can make any image responsive with simple CSS.

How does making banner image responsive work?

Here, in this tutorial – I will be implementing pure CSS3 to make an Image responsive. I will write a global style for that Image as well as CSS3 media queries to make that Image to be fit within the screen and occupy available space. Thus, the Image will be legible enough in small devices.

This image will be responsive on all screen resolutions like:

  • smaller mobile screens
  • 320X480 – iPhone [Portrait orientation]
  • 360X640 – One of the smart phone
  • 780X1024 – Larger tablet or a 17″ Desktop
  • Larger desktops

Want to know more about Responsive websites and Screen resolutions?

Getting you started!

If you have Dreamweaver – it would be awesome. But, not to worry – you can even accomplish this task using at-least Edit Plus or Notepad++ or even Notepad itself.

Follow the steps below:

Step1: Create your project folder/directory inside one of your safe drives. Name it “image responsive“.

Step 2: Open Dreamweaver and create a HTML. Are you not aware of how to use Dreamweaver? See how to use Dreamweaver.

Step 3: Save that HTML file inside your “image responsive” folder.

Step 4: Again, create a folder by name “images” inside the “image responsive” folder.

Step 5: Lastly, create another folder by name “css” inside the “image responsive“.

Please see below screenshot for the folder structure:

Make image responsive folder structure - PepFry

Make an image responsive folder structure

What next?

Step 1: Once done with that – please open the HTML in you HTML editor. May be Dreamweaver, Notepad ++, Edit plus or Notepad.

Step 2: Go to your “images” folder and copy any image that you want to make responsive. I’ll go online and create a dummy image for this tutorial. Click here if you also want to take advantage – Its really quick and simple.

Step 3: Write the following code after the <body> tag in your HTML file you just created.

What is it?

1. I have wrapped the Image inside a <div> which is not a mandatory stuff there. Image can go alone and be responsive.

2. Even though I have provided width and height – the image will shrink and grow as and when you shrink your browser. This works well on Internet explorer as well along with Firefox, Chrome and Safari.

Step 4: Write the following style after the title tag and just before the head tag in your HTML file you just created.

What is it?

1. img in the above style is the selector there. It selects all the images in the HTML file and then assigns the styles written inside the brackets.

2. I have set width to 100%. i.e. no matter what ever might be the device width – the image should occupy the space available out there. Height is set to auto, so that we are leaving the browser to set the height proportionately to the width. So that we get accuracy 100%.

3. If there is only an Image in the whole website – then setting 100% will render the Image in very large size. Its not a kinda rendering problem – it is doing what I asked it to. Don’t worry – we can tackle the problem by writing media queries for larger screen resolution. And, we’ll need to set the width to lesser %. Might be around 50% or lesser according to the screen resolution.

All together the HTML file should contain the following markup:

Once you are done with the entire HTML file – run the HTML file in your favorite browser like Firefox or Chrome. However, it should be compatible on all Modern browsers.

Here are few of the screenshots when tested using “Responsive design view in Firefox“.

360X640 – Portrait orientation

Make an image responsive - responsive design portrait view - PepFry

Make an image responsive – responsive design portrait view

640X360 – Landscape orientation

Make an image responsive - responsive design Landscape view PepFry

Make an image responsive – responsive design Landscape view

Test responsiveness of the image now!

That’s it guys, you have done it – you have create your image to be responsive on mobile devices as well as on Desktop devices. You can implement the same technique on any of you website and feel the responsiveness of the image on mobile devices.

Thanks for coming along with the tutorial – Any suggestions or questions are welcomed. Please feel free to post it in the comment section below.

17 thoughts on “How to make banner image responsive in your website

  1. Work perfectly. But, how can I do to put the image as leader banner on a WordPress blog?
    I must upload the image folder on contents via ftp? And after?
    Thanks alot

    Fabio

  2. hello,
    I copied the mark up on the site but the banner is missing the link to work, you can write the code and tell me where to put it to create a link to a page.

    thanks
    paolo

    • Hi Paolo,

      Are you speaking about the link to the Banner Image?
      If so, [ src="images/Responsive_banner_image.jpg" ] is the path to the image file that you should be placing inside the images folder.

      If you want to access the banner image using [src="images/Responsive_banner_image.jpg"]. Then you have to put an image with the file name [Responsive_banner_image.jpg] inside the images folder.

      Hope its clear now!

Leave a Reply to Paolo Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">