in

CSS BACKGROUND | Learn How to Design Web Background using CSS

In this tutorial we will be looking at CSS Background creation. In our previous tutorial we looked at CSS colors and how you can easily create them. If you are yet to read through the tutorial you can do so using the link below

Read previous tutorial on: Understanding CSS Colors And How To Use Them

CSS BACKGROUND

CSS allows us to set the background property of an HTML document to what whatever style or customization we want. The default background color is white so if you don’t include a background color or image your web page will take a white background. Have it in mind that images with high quality tend to affect the web page load speed negatively and its preferable you make use of images with file extension “.png” .

There are list of HTML background properties we can work easily work on and they include:

  • The background
  • The background-color
  • The background-attachment
  • The background-repeat
  • The background-position
  • The background-image

The background-color

This background property is used to set the background color of the HTML document. If as a developer you intend changing the background color of your web page or the background color of the paragraph section of your web page you can do so by following the example below

<!DOCTYPE html>
<html lang="en">
<head>
     
   
   <title>Background color styling illustration</title>
</head>
<body >
<p style="background-color: red;" >this is the paragraph section </p>
   
   

</body>
</html>

Result

Background color styling illustration

this is the paragraph section

The background-image

The background image of the web page can be installed using the syntax shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body  {
         background-image: url("imageurl.png");
         background-color:red;
      }
   </style>
     
   
   <title>Background image styling illustration</title>
</head>
<body >
   
   

</body>
</html>

The background-repeat

The background repeat attribute is used to repeat or duplicate the background image. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body  {
         background-image: url("imageurl.png");
         background-repeat: repeat;
      }
   </style>
     
   
   <title>Background image repeat illustration</title>
</head>
<body >
   
   

</body>
</html>

note that you can also repeat it along the x or y axis.

Repeat along the x- axis

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body  {
         background-image: url("imageurl.png");
         background-repeat: repeat-x;
      }
   </style>
     
   
   <title>Background image repeat illustration</title>
</head>
<body >
   
   

</body>
</html>

Repeat along the y-axis

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body  {
         background-image: url("imageurl.png");
         background-repeat: repeat-y;
      }
   </style>
     
   
   <title>Background image repeat illustration</title>
</head>
<body >
   
   

</body>
</html>

The background-position

The below illustration can be used to set the background image position

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body  {
         background-image: url("imageurl.png");
         background-position: 90px;
      }
   </style>
     
   
   <title>Background image position illustration</title>
</head>
<body >
   
   

</body>
</html>

The background-attachment

The background attachment attribute is used to ensure the web page background image is either fixed or scrolling with the page. The below example shows how to set up the fixed background image

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body {
         background-image: url("imageurl.png");
         background-repeat: no-repeat;
         background-attachment: fixed;
      }
   </style>
     
   
   <title>Background image position illustration</title>
</head>
<body >
   
   

</body>
</html>

The background scrolling image example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body {
         background-image: url("imageurl.png");
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-attachment:scroll;
      }
   </style>
     
   
   <title>Background image position illustration</title>
</head>
<body >
   
   

</body>
</html>

Conclusion

Now you are done with the CSS BACKGROUND lets move on to CSS FONTS .

What do you think?

css colors

Understanding CSS Colors And How To Use Them

CSS fonts

CSS FONTS | Learn How To Design Web Fonts Using CSS