Open In App

Tachyons Theming Background Size

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 10 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads