How to Stretch Image Using CSS

0
77

If you are having a hard time on How to Stretch Image Using CSS, this tutorial will surely help you with your problem and it works well. The method that you are about to learn is just simple and very easy to follow. This is so very responsive even in mobile or desktop view.The position of the image is fixed and cannot be scroll down. It works pretty well for the background of the page.

 

Below are the following step by step guide on How to Stretch Image Using CSS.

 

Lets Begin:

 

First Step: Create a  landing page and name it “index.php“.

Second Step: Create a CSS class to stretch the background image of the page.

  1. <style type="text/css">
  2. #bacgroundimage {
  3. width: 100%;
  4. height: 100%;
  5. position: fixed;
  6. left: 0px;
  7. top: 0px;
  8. z-index: -999; /* this ensure that the div tag stays behind content; -1 it also work. */
  9. }
  10.  
  11. .stretch-image {
  12. width:100%;
  13. height:100%;
  14. }
  15. </style>

Third Step: Do the following codes for displaying an image.

  1. <div id="backgroundimage">
  2.  
  3. <img class="stretch-image" src="https://pbs.twimg.com/profile_images/993504415/css_400x400.png" />
  4.  
  5. </div>

 

If you have any questions or suggestion about on How to Stretch Image Using CSS, please feel free to contact us at our contact page.You can subscribe this site to see more of my tutorials.

 

You can also view these tutorials below:

Facebook Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here