Home
Blogger

Add Blogger Body Pattern Background by using CSS

Add Blogger Body Pattern Background by using CSS
background pattern

CSS is most powerful coding system where we can make almost anything. Day by day by improving of CSS we are getting many new tutorial. It has a great impact on creating different design, background. As a result web developer are using CSS instead of Image for designing website. I have already published many CSS tutorial to create widget. But today I will show you how we can add Blogger template background without using any image or patter. If we add a background Image or pattern then it takes longer time to load. on the other hand it is hard to find perfect image that match without blogger template. However by using CSS coding we can create pattern and further we will able to add those pattern code as Blogger template background. I have used pure CSS code, you won't find a single image file in Pattern background code.

So you have to simply follow the below step to add this background  just follow the below steps-

Step 1 Log in to your Blogger Account  and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F 

Step 4 Copy any code from below and Paste the code above/before </b:skin> 

Background Design 1

Code for Background Design 1 are below-

dot

body{
background:white;
background: radial-gradient(black 15%, transparent 16%),
radial-gradient(black 15%, transparent 16%);
background: -moz-radial-gradient(black 15%, transparent 16%),
-moz-radial-gradient(black 15%, transparent 16%);
background: -o-radial-gradient(black 15%, transparent 16%),
-o-radial-gradient(black 15%, transparent 16%);
background: -webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(black 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
}

Background Design 2

Code for Background Design 2 are below-

sky



body{
background: #ABD4EC;
background: linear-gradient(#ABD4EC 50%, white 50%);
background:-o-linear-gradient(#ABD4EC 50%, white 50%);
background: -moz-linear-gradient(#ABD4EC 50%, white 50%);
background: -webkit-linear-gradient(#ABD4EC 50%, white 50%);
background-size: 10px 10px;
}

Background Design 3

Code for Background Design 3 are below-

horizontal stripe

body{
background: black;
background: linear-gradient(black 50%, white 50%);
background: -o-linear-gradient(black 50%, white 50%);
background: -moz-linear-gradient(black 50%, white 50%);
background: -webkit-linear-gradient(black 50%, white 50%);
background-size: 10px 10px;
}

Background Design 4


Code for Background Design 4 are below-

purple stripe

body{
color: white;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}

Background Design 5

Code for Background Design 5 are below-

vertical stripe

body{
color: black;
background: repeating-linear-gradient(
to right,
#F3E2E2,
#F3E2E2 10px,
#FAFAFA 10px,
#FAFAFA 20px
);
}

Background Design 6

Code for Background Design 6 are below-

round

body{
color: white;
background: repeating-radial-gradient(
circle,
#800080,
#800080 10px,
#4b026f 10px,
#4b026f 20px
);
}

Background Design 7

This called Saw pattern. Code for Background Design 7 are below-

saw

body{
color: white;
  background: linear-gradient(
45deg,
#5d9634,
#5d9634 50%,
#538c2b 50%,
#538c2b
 );
 background-size: 20px 10px;
}

Background Design 8

This is called circle pattern. Code for Background Design 8 are below-

circle

body{
background: radial-gradient(
circle,
purple,
purple 50%,
#FAFAFA 50%,
#FAFAFA
);
 background-size: 20px 20px;
}

Background Design 9

Code for Background Design 9 are below-

purple stripe

body{
background: repeating-linear-gradient(
-55deg,
#333 1px,
violet 2px,
violet 11px,
#333 12px,
#333 20px
 );
}

Background Design 10

Code for Background Design 10 are below-

stripe

body{
background: repeating-linear-gradient(
-55deg,
#F9F9F9 1px,
#FFFFFF 2px,
#EEEEEE 5px,
#FAFAFA 6px,
#FAFAFA 8px
);
}

Step 5 Finally hit the Save template button.

Customization

  • To change the pattern color just change color code only from code block. You can avail the different color from our .


If you are facing any trouble to add CSS Pattern background in your Blogger template then you can write a comment below. I will help you to add background. 

Post a Comment

Go Up