Social Icons

Monday, July 6, 2020

The CSS background property

The background property as its name suggests, allows us to modify the background of our web page: we can put a color of our choice, we can also put a nice image as a background ...

1 - background-color 

This property is used to change the background color of an element. Example: coloring of the background in red:
body {background-color: blue; }
 If you want test this code example, insert it between head and head:
<!DOCTYPE html>
<html lang="en">
<head>
    <title> Background </title>
    <style>
        body {
            background-color: blue;
        }
    </style>
</head>
<body>

</body>
</html>
and then launch it in your browser:

2 - background-image 

 This property is used to put an image in the background of an element. The image is automatically repeated to cover the entire element in question.

Example

body {backgroun-image: url (address); } // address = url address of the image

3 - background-repeat

This property defines how the image should repeat itself.

Example: background without repeating the image

body {backgroun-image: url (address); background-repeat: no-repeat; } // no image repetition

Example: background with horizontal repetition of the image (repeat-x)

body {backgroun-image: url (address); background-repeat: repeat-x; } // repeat horizontally

Example: background with vertical repetition of the image (repeat-y)

body {backgroun-image: url (address); background-repeat: repeat-y; } // repeat vertically

4 - background-position 

This property is used to determine the position of the image on the background using the following keywords:
  1. top : image centered in the top of the page or block. 
  2. center : image in the center of the page or block.
  3. bottom : image at the bottom center of the page or block. 
  4. right : image in the right of the page or block. 
  5. left  :  image in the left of the page or block. 

Example: background with an image palcée at the top left

body {backgroun-image: url (address);
background-repeat: no-repeat;
background-position: left top; }
the image in this example is positioned at the top left
We can also use the coordinate of object:
body {backgroun-image: url (address);
background-repeat: no-repeat;
background-position: x , y; }

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Background </title>
    <style>
    body {
           background-image: url('https://download.seaicons.com/icons/iconshow/transport/128/Sportscar-car-icon.png');
           background-repeat: no-repeat;
    background-position: 100px 20px;
        }
    </style>
</head>
<body>

</body>
</html>

Note: We can also use the% for positioning the image 

Example: To position the image at the top right we use the code:

body {backgroun-image: url (address);
background-repeat: no-repeat;
background-position: 100% 0%; }

Example: To position the image in the middle of the page, we use the code:

body {backgroun-image: url (address);
background-repeat: no-repeat;
background-position: 50% 50%; }

Example of background with no-repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Background </title>
    <style>
        body {
            background-image: url('https://download.seaicons.com/icons/iconshow/transport/128/Sportscar-car-icon.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

</body>
</html>
After Execution we will see:

Example of background with repeat-x

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Background </title>
    <style>
        body {
            background-image: url('https://download.seaicons.com/icons/iconshow/transport/128/Sportscar-car-icon.png');
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>

</body>
</html>
After Execution we will see:

Example of background with repeat-y

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Background </title>
    <style>
        body {
            background-image: url('https://download.seaicons.com/icons/iconshow/transport/128/Sportscar-car-icon.png');
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>

</body>
</html>
After Execution we will see:

Younes Derfoufi
my-courses.net

No comments:

Post a Comment

Category Of Mobile Courses

Actualités (644) Adsense (1) Affiliation (1) Algebraic Topology (1) Algorithmic (1) all-news (30) Android (5) Android App (8) Android app without code (4) Android Apps (167) Android Development (4) Android download (2) Android OS (3) AngularJS (1) Automata theory and formal language (5) C programming (5) Category and Functor (8) CMS (3) Computer Glossary (18) Create Mobile App With Ionic Framework (2) CSS (2) CSS-Cascading-Style-Sheets (4) Developpement Java (13) Differential Geometry (1) Django-Python-Framework (8) dropshiping (26) Earn Money by Internet (4) Emplois (23) Framework php (2) Fraud (2) HTML (7) Java For Beginners (10) Javascript (12) Kotlin Programming Language (8) Kotlin For Mobile Android (1) Linux Download (2) Marketing (5) Mobile (3) Mobile Courses (4) Mobile Marketing (4) MoneyGram (1) News (721) Node.js (5) Open Source (1) Photoshop (1) Protect Computer (1) Python (32) Python BeautifulSoup (1) Python For Data Science (2) Python-Books (6) Python-DVD-Training (1) Python-Exercises (138) Python-Framework (1) Python-IDE (1) Python-Modules (1) Python-pdf (2) Python-pyQt (1) Référencement (2) Script PHP (2) Security (6) SEO (1) Snipping Tool: Faq (1) Social Networks (1) Source Code (1) Statistics With SPSS (2) Surveillance Software (1) Travail à domicile (6) Tutoriels php en vidéos (2) Tutoriels-MySql (6) tutoriels-php (19) Utilitaires (1) VPS (1) Web Hosting (1) Webcam (1) Webmarketing (11) Western Union (1) Windows 10 (1) Windows 7 (4) Windows 7 Faq (2) Windows 8 (1) Windows Accessories (1) Windows Download (8) Windows Drivers (1) Windows Fonts (1) Windows Power Shell (2) Windows Registry (2) Windows Security (18) Windows Software (2) Windows Spyware (2) Windows utilities (3) Windows Virus (2) Windows Vista (3) Windows Wireless (1) Windows xp (1) Wordpress (1)
 

Sample text

Sample Text

 
Blogger Templates