In this post, I am going to tell you how you can add some lines or patterns to the background of your website. As an example, you can see that in WhatsApp, when you open a contact, there are some doodles in the background where messages are displayed. Here you will learn step by step how you can also add these types of lines or patterns to your website absolutely free. So keep reading.
Many people use these "Transparent Textures" on their websites to make them more beautiful and appealing to the eye of the user. To add these transparent textures to your website, you only need to know some basic HTML and CSS. The "Transparent Textures" website will provide you with the CSS which you can add to the body tag of your HTML file. If you are ready, then let's see the steps now.
Step 1: Go to "Transparent Textures"
Step 2: Select your preferred texture.
Step 3: Get the CSS
On the left hand side, you will see an option like "3. Grab the CSS". There you will get the CSS code to apply the texture. Just copy it. Here you can also change the background colour of your website. On this website, you can also see a preview of the transparent texture.
Note: If you want to use it for testing purposes, you can use the CSS code as it is, but if you are using it for your official or production website, it is recommended that you download the transparent texture. On this site, you can easily download the textures.
Step 4: Open your "styles.css" file.
Step 5: Paste the CSS code.
After opening your CSS file, you just have to write the HTML tag to which you are planning to add the transparent texture. You can add that code to the "body tag" or "html tag". You can also add the code as inline CSS.
For example,
body {
background-color: #851400;
background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
}
// Here "background-color" is optional.
In this example, we are adding the code in the CSS file to the "body" tag of our website. You can add the code to any HTML tag that you want, like a div or p tag. The above code will add a background image to the "body" tag and change its background colour.
I hope by following these steps you will be able to add transparent textures to your website. If you have a question or encounter a problem, then you can tell me in the comment section. Do let me know if you want more posts like this. If you like this post, then make sure you follow my blog.
Comments
Post a Comment