Tachyons is a toolkit that is used to create a responsive website. In this article, we will learn how to change the size of the background using the Tachyons toolkit.
Tachyons Theming Background Size is used to fill the containing elements with the background image. We can use contain and cover classes to fill the background image.
Tachyons Theming Background Size Classes:
- contain: It is used to display an entire image within the element, regardless of the element’s dimensions.
- cover: It is used to display the entire element but won’t guarantee that the entire image will be shown.
Syntax:
<element-name class="class-name">
...
</element-name>Example 1: This example demonstrates the Tachyons Theming Background Size using contain class.
HTML
<!DOCTYPE html><html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
<style>
body {
text-align: center;
margin: 20px;
background-image: url(
background-repeat: no-repeat;
}
</style>
</head>
<body class="contain">
<h1 class="green">GeeksforGeeks</h1>
</body>
</html>
|
Output:
Example 2: This example demonstrates the Tachyons Theming Background Size using cover class.
HTML
<!DOCTYPE html><html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
<style>
body {
text-align: center;
margin: 20px;
background-image: url(
background-repeat: no-repeat;
}
</style>
</head>
<body class="cover">
<h1 class="green">GeeksforGeeks</h1>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/themes/background-size/