Hi all,
The responsive HTML canvas background is very important in web application. Sometimes it’s very difficult task to achieve this problem. First we simply need to define height and width of #canvas_image in order for the background-image.
Table of Content
- The CSS
- The HTML
The HTML
We will use the CSS background-size property to make it happen. There is no JavaScript needed for develope this applications.
The CSS
The background-size:contain; helps to scale the image to the largest size with width and height can fit inside the content area.
And also specify the height and width of canvas.
#canvas_image
{
background-image:url('http://prittytimes.com/wp-content/uploads/2016/03/Indipendant-Travel1.jpg');
background-repeat:no-repeat;
background-size:contain;
height: 100%;
width: 100%;
background-position:center;
}
background-size: auto|inherit|length|initial|contain|cover;
Property Values
| Value | Description |
|---|---|
| auto | It’s default value. The background-image contains its height and width. |
| inherit | Inherits this property from its parent element |
| length | Sets the height and width of the background image |
| initial | Sets this property to its default value |
| contain | Scale the image to the largest size such that both its width and its height can fit inside the content area |
| cover | Scale the background image to be as large as possible so that the background area is completely covered by the background image. |
Full Code
If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.