How to css button background image

Posted under CSS3 Course On By mohammed.mutawe

css button background image

Our lesson is very simple. Imagine that you made an HTML tag that contains certain data and you want to attach an image to it. You will select the appropriate image for this tag and this is what we will do using CSS.

 

Definition

our div
{
  background:url('');
}

In order to create a background image for our HTML tag, we put the URL of the image we want to activate in background:url and the image will be displayed within the boundaries of the HTML tag we have specified.

 

Properties

There are several characteristics that we must consider when adding a background image, namely:

  • Width and height : it’s a recommended to set size of your div such width or height.
  • Texts : When you add some text tags , it’s preferred to give it’s different colors to appear very clear.

 

Uses

Background images are frequently used in some parts of our website, which are:

  • Homepage : many sites use background images on the home page, which reflects a beautiful impression for visitors.
  • Grid : We need to use background images when using grid, and the image efficiency appears very high when calling addresses and information from databases.

 

Example

Please, to understand CSS background well, copy the following codes and run it in your browser.

CSS

.background{
    width:400px;
    height:200px;

    float:left;
    background:url('https://www.lifewire.com/thmb/Jr8JLKAqhDSa4sobdYe7LX-0QA0=/774x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/surf-internet-url-henrik5000-e-getty-images-56fa7f855f9b5829867282a9.jpg');
    background-size:cover;
    border-radius:5px;

}


p{
    background-color:#D9D9D9;
    font-size:24px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS Background</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="background">
            <p>Hello i am <a href="https://tajersys.com">tajersys.com </a>and i will show you how to use background in css</p>
        </div>

    </body>

</html>