HTML Background Images

byTophyiptrust Admin -May 31, 2020

0

HTML Background Images

HTML Background Images:

We already know how to display pictures. The <img> tag is used to display images. We know in advance how to give background color. Click here to know how to give background color. Today we will learn how to set a background image on a web page. We basically use the background image in the <div> tag with the style attribute. Background images will make our page more beautiful. We can use any image of the backgrounds in our page.

Html Text Color Codes :

Result:

HTML Background Image

HTML Hyper text markup language.

CSS Cascading Style Sheets.

PHP Hypertext Preprocessor.

Bootstrap An other programing language.

That Background image used Internal image are used here. That Background image used Internal image are used here. If you want display internal image first upload your image in your hosting. If you want you can add an external image in the background so you need to use the image location url.

Html Text Color Codes external image :

Result:

HTML Background Image

HTML Hyper text markup language.

CSS Cascading Style Sheets.

PHP Hypertext Preprocessor.

Bootstrap An other programing language.

This is the content background image. That Background image used External image are used here. You can use full body background image if you want. Which will display on your entire page

Html Text Color Codes :

Result:

HTML Background Image

HTML Hyper text markup language.

CSS Cascading Style Sheets.

PHP Hypertext Preprocessor.

Bootstrap An other programing language.

This is the animeted background image. That Background image used External image are used here.

Html Text Color Codes full body background image :

Result:

Check out

This background image displaying to the entire page. Do you want to check this code click on the Check out link.

Html Text Color Codes :

Result:

Check out

This is the sky animated background image. Do you want to check this code click on the Check out link.

Html Text Color Codes :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("https://cdn.lowgif.com/full/d1c53b5331412730-sky-background-gif-9-gif-images-download.gif");
  height: 100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
</style>
</head>
<body>

<div class="bgimg-1">
  <div class="caption">
    FULL PAGE<br>
    BACKGROUND IMAGE
  </div>
</div>
</body>
</html>

Result:

Check out

This is the sky animated background image. Do you want to check this code click on the Check out link.

Hope everybody understands. If there is a problem or you need some more advance, let us know through the contract page. Thank You All And Have A Good Day.

HTML Background Images

HTML Background Images

HTML Background Images:

Html Text Color Codes :

Result:

HTML Background Image

Html Text Color Codes external image :

Result:

HTML Background Image

Html Text Color Codes :

Result:

HTML Background Image

Html Text Color Codes full body background image :

Result:

Html Text Color Codes :

Result:

Html Text Color Codes :

Result:

Biểu mẫu liên hệ