Home / Web Development / CSS / Responsive HTML5 Canvas Background Image | A Pure CSS Solution

Responsive HTML5 Canvas Background Image | A Pure CSS Solution

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

  1. The CSS
  2. 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.

Leave a Reply

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

Social Media Auto Publish Powered By : XYZScripts.com