saftutorials.com

CSS Introduction

CSS Structure

CSS Colors

CSS Background

CSS Width-Height

CSS Float

CSS Display

CSS Borders

CSS Fonts

CSS Text

CSS Align

CSS List

CSS Margin

CSS Padding

CSS Position

CSS Tables

CSS Images

CSS Link

CSS Icons

CSS MAX MIN WIDTH-HEIGHT
CSS Background Tutorial

CSS Background is important for a website nice look. You can make nice design your website using CSS Background. With CSS Background you can set your website body, div, table etc background by img or color.

By this tutorials you can learn

1) How to use CSS Background?

2) Where to use CSS Background?


How to use CSS 

Background?

1) For Background Image - Use background image by CSS Background like:  background-image: url(image source here); 

2) For Background Color - Use background color by CSS Background like: background: #cccccc; (Note: cccccc is an color Code)

CSS Background Property

1) Background Color - Use for Background Image 

2) Background Image - Use for Background Image 

3) Background Repeat - Use for Control Background Image Repeat

4) Background Attachment - Use for Attachment 

5) Background Position - Use for Background Position 

6) Background Size - Use for Background image width, height size.


Where to use CSS Background?

1) Body Background, 2) Div Background, 3) Table Background, 4) Image Background etc.

CSS Background Color

CSS Background Color use by three way

A) Color Name like: green, red, blue, black etc.

B) Color Code like: #00000, #00ff00, #ff0000 etc.

C) RGB Color like: rgb(255,0,0).

CSS Background use for Body Background.
<!DOCTYPE html>
<html>
<head>
  <title>CSS Background use for Body Background</title>
</head>
<body bgcolor="green">
<p>This is Sample Paragraph</p>
<h1>This is Sample h1 Heading tag</h1>
</body>
</html>

Copy code and try to Editor

CSS Background use for DIV Background
<!DOCTYPE html>
<html>
<head>
  <title>CSS Background use for DIV Background</title>
</head>
<body>
<div style="background: green; width: 200px; height: 100px; float:left;">
</div>
</body>
</html>

Copy code and try to Editor

CSS Background use for TABLE Background
<!DOCTYPE html>
<html>
<head>
  <title>CSS Background use for TABLE Background</title>
</head>
<body>
<table border="1" style="width: 200px;height: 150px; background: green">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
</body>
</html>

Copy code and try to Editor

Cell 1 Cell 2
Cell 3 Cell 4
Background Image use by CSS Background
<!DOCTYPE html>
<html>
<head>
  <title>Background Image use by CSS Background</title>
</head>
<body>
<div style="background-image: url(../uploads/sample.png); ; width: 200px; height: 200px; float:left;">
</div>
</body>
</html>

Copy code and try to Editor

Background Image with Repeat
<!DOCTYPE html>
<html>
<head>
  <title>Background Image with Repeat</title>
  <style type="text/css">
    .div1
    {
      width: 100%;
      height: 250px;
      background-image:url( ../uploads/sample.png);
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

Copy code and try to Editor

Background Animation Image
<!DOCTYPE html>
<html>
<head>
  <title>Background Animation Image</title>
  <style type="text/css">
    .div2
    {
      width: 100%;
      height: 250px;
      background-image:url( ../uploads/sample.gif);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
<div class="div2"></div>
</body>
</html>

Copy code and try to Editor

Background Image with Position
<!DOCTYPE html>
<html>
<head>
  <title>Background Image with Position</title>
  <style type="text/css">
    body 
    {
        background-image: url("../uploads/sample.png");
        margin-left: 350px;
        background-repeat: no-repeat;
        background-position: left top;
    }
  </style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</body>
</html>

Copy code and try to Editor

Background Image Fixed
<!DOCTYPE html>
<html>
<head>
  <title>Background Image Fixed</title>
  <style type="text/css">
    body 
    {
        background-image: url("../uploads/sample.png");
        background-repeat: no-repeat;
        background-position: left top;
        background-image: url("../uploads/sample.png");
        background-attachment: fixed;
    }
  </style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</body>
</html>

Copy code and try to Editor

Background Image with Size
<!DOCTYPE html>
<html>
<head>
  <title>Background Image with Repeat</title>
  <style type="text/css">
    .div1
    {
      width: 250px;
      height: 250px;
      background-image:url( ../uploads/sample.png);
      background-repeat: no-repeat;
      background-size:100% 100%;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

Copy code and try to Editor

Find us on

Facebook Google Plus Twitter Pinterest YouTube

Learn HTML

Learn CSS

Learn JS

Learn PHP

Learn ASP

Learn SQL

Learn MySQL

Learn Bootstrap

Learn WP

Learn AJAX

Learn Tools

Learn ANGULAR JS

Learn SEO

Learn Earning

Learn HOW TO

Learn CodeIgniter

web hit counter