WebTrainingRoom Online Courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

How to write background in CSS class


In HTML page designing we often see various type of background of content, wondering how that works!

We can set background color and background image, Let’s learn setting up background using CSS

Background using CSS Style

When we say setting background, it can be background of any type of HTML document / HTML element.
So here we create a class with some background, and the class can be applied on any element

Now in following example we have written some text (“Using Background Image”) in a <div> and the <div> has some background image.


Using Background Image

Here is the class we have written.
.bgExample        
{
    background-image:url('../images/learn-css.png');
    background-position:center;
    min-height:120px;
    border:solid 1px #0094ff;
    text-align:center;
    font-size:28px;
    color:#ffd800;
}

Now you can enhance it further with many other background-image properties

Background properties in CSS Style

  • background-image

    to set any image as background you can write background-image: url('../images/learn-css.png');

  • background-position

    to set the background position you can write, background-position: center; or background-position: bottom center; both x and y axis

  • background-repeat

    Often used options are background-repeat: repeat-x | repeat-y | no-repeat | ...many more

  • background-color

    you can set background color of any element, background-color:red or background-color:#ff0000 , you can set any color using CSS



Comment
Name Email Website
Subscribe
 
Background Image Video CSS Style, CSS Tutorial



Consulting