How Do I Put a Background images on Html Using Css With Examples

Posted By Bajarangi soft , Posted On 29-09-2020

The CSS background properties are used to define the background effects for elements,The background-image property specifies an image to use as the background of an element,By default, the background-image property repeats an image both horizontally and vertically,Some images should be repeated only horizontally or vertically, or they will look strange, like this,The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page),To shorten the code, it is also possible to specify all the background properties in one single property.

1.How To Insert A Background image iin HTML File

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("my_pic.jpg");
            background-repeat: no-repeat;
            background-position: right top;
            margin-right: 200px;
            background-attachment: fixed;
        }
    </style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>

<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
<p>Bajarangi software solutions  WEB DESIGNING industry.</p>
</body>
</html>

2.How To Insert A Background shorthand Property inHTML File

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #ffffff url("my_pic.jpg") no-repeat right top;
            margin-right: 200px;
        }
    </style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write over the background image.</p>

</body>
</html>

Related Post

How To Upload Multiple Images Using For Loop In PHP
How Can HTML DOM Images Collection Done Using JavaScript
How To Give Background Images To HTML Elements By Using Css
How Do I Put a Background images on Html Using Css With Examples
How To Create Modal Images Using CSS And JavaScript
How To Create Modal Images Gallery Using JavaScript
Responsive Images In Bootstrap with Examples
How To Set Multiple Background Images Using Css
How To Add Images Into Dropdown List For Each Items
Drag And Drop Images To Save In DB Using JQuery And PHP
How To Set Background Images Without Repeat In CSS
How To Change Background Images On Scroll Using CSS