How To Give Background Images To HTML Elements By Using Css

admin_img Posted By Bajarangi soft , Posted On 27-09-2020

A background image can be specified for almost any HTML element,To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property,If you want the entire page to have a background image, you must specify the background image on the 'body' element.

Background image result Picture

1.Background images inside the Html and css

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>
    <h2>Background Stretch</h2>
    <p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>
</body>
</html>
2.Background images  using div inside the Html and css
<!DOCTYPE html>
<html>
<body>
    <h2>Background Image</h2>
    <p>A background image for a div elememt:</p>
    <div style="background-image: url('img_girl.jpg');">
          You can specify background images for any visible HTML element. In this example, the background image is specified for a div element. By default, the background-image will repeat itself in the direction(s) where it is smaller than the element where it is specified. (Try resizing the browser window to see how the background image behaves.
   </div>
   <p>A background image for a p elememt:</p>
   <p style="background-image: url('img_girl.jpg');"> You can specify background images for any visible HTML element. In this example, the background image is specified for a p element. By default, the background-image will repeat itself in the direction(s) where it is smaller than the element where it is specified. (Try resizing the browser window to see how the background image behaves.</p>
</body>
</html>



 
3.Float images inside the HTML 
<!DOCTYPE html>
<html>
<style>
    p{
        color:red;
        text-align: center;
    }
    h2{
        color:black;
        text-align: center;
    }
</style>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
    <img src="somu.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
    A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
    <img src="somu.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
    A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

</body>
</html>

 

Related Post