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.
You might also like: Creating responsive banner slide show using bxslider
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 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.
1 2 3 | <div class="img_responsive"> <img src="images/Responsive_banner_image.jpg" width="600" height="300" alt="Make Image responsive" /> </div> |
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.
1 2 3 4 | img { width: 100%; height:auto; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Responsive banner image</title> <style type="text/css"> img { width: 100%; height: auto; } </style> </head> <body> <div> <img src="images/Responsive_banner_image.jpg" width="600" height="300" alt="Make Image responsive" /> </div> </body> </html> |
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
640X360 – Landscape orientation
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.
Very good brilliant job
Thank you Somnath!
Thanks!
Sumesh M.S
Gracias, funciona perfecto
Hi Daniel,
Great, it worked for you
Thanks!
Sumesh M.S
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
There are plugins to do that Fabio!
Try this: https://wordpress.org/plugins/responsive-slideshow/
Hi, probably I meant bad. Sorry for my poor english … I meant that with the procedure you described I took a 720 x 90 banner, animated gif, and I managed to make it responsive. The problem is that I got a html file and not an image. How can I put it on the site?
Thanks alot.
Fabio
Hi Fabio,
If you already have html then its simple.
Just copy the code for image <img src=”" …… /> and copy the styles that you have written to make the image responsive.
Now, login to wordpress and got to you WordPress file editor under Appearance and open header.php and paste it where ever you want you lead banner image to be.
Thanks for this tutorial, Sumesh!
I have a question: What is the empty CSS folder for?
Thank you,
Lili.
Hi LiLi,
Sorry for the confusion.
That empty CSS folder was for in-case – If you would wish to keep your styles in a style sheet!
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!
Wow! You just saved my life with this tutorial. Well done. Thank you!
Thanks For Information…
Can you please let me know how to make an entire HTML page RESPOSIVE?
Thanks, so simple.
is there any wp plugin to add banner on header that is responsive to all devices ?
I want to use for my site- fanowers.com