How To Add A Background To An Entire Html Page

Adding a Background Image in HTML is one of the near common tasks when you lot are working on Web Designing. The following pointers will be covered in this commodity:

Background Image in HTML
CSS background-image Property
Background Repeat
Using Grade
Linear-gradient
3 Colour Gradient
Repeating Linear Gradient
Radial Gradient
iii Color Radial Gradient
Repeating Radial Gradient

Moving on with this article on Background Image In HTML

Groundwork Prototype In HTML

There are various ways in which images tin be added to a web page to make information technology look captivating & appealing. One of such means is adding background paradigm. In this blog we will understand how we tin add groundwork images in a webpage using HTML & CSS. The nearly common & simple way to add background image is using the background image aspect inside the <trunk> tag.

Case

<!DOCTYPE html> <html> <trunk background="edureka.png"> <h1>Welcome to Edureka</h1> <p><a href="https://www.edureka.co">Edureka.co</a></p> </body> </html>

Image - Background image in HTML- Edureka
The background attribute which we specified in the <trunk> tag is not supported in HTML5. Using CSS properties, nosotros can likewise add together groundwork epitome in a webpage.

Let us offset sympathise how we tin can add groundwork image in a webpage using CSS. Later moving ahead, we will expect at different CSS properties using which we tin change the look & feel of the webpage.

CSS background-epitome Holding

In all the examples, we will be defining the CSS lawmaking inside the <style> tag. We will besides wait how to target div tag and class using CSS. In the below case, nosotros are specifying the background-image & background-color CSS holding which will set the background paradigm & background property for the HTML body respectively.

Moving on with this commodity on Groundwork Prototype In HTML

Example

<!DOCTYPE html> <html> <head> <style>  body {   background-epitome: url("bg1.jpg");   groundwork-colour: #cccccc; } </fashion> </caput> <body> 	<p>Document Trunk</p> </torso> </html>

You can also go alee and add two groundwork images for the <body> element.

Example

trunk { background-prototype: url("bg3.png"), url("bg1.jpg"); groundwork-color: #cccccc; }

Notes:

The groundwork paradigm by default is added to the left corner & is repeated both ways, i.e. horizontally & vertically.
The reason why it is preferred to keep a background color is that if the image is unavailable, so the background-color belongings will exist used and the same will be displayed.

At present before understanding how we can use different CSS property values, let'southward look at the listing of CSS belongings values associated with the background image.

url: URL to the background epitome. In example of more than than one image, comma-separated list needs be provided.
linear-gradient(): Sets a linear gradient as the background epitome. Needs at to the lowest degree 2 colors.
radial-slope(): Sets a radial gradient as the background epitome. Needs at least 2 colors.
repeating-linear-gradient(): Repeats a linear slope
repeating-radial-gradient(): Repeats a radial gradient
initial: Sets the property to its default value
inherit: Inherits this property from its parent element

Moving on with this commodity on Background Image In HTML

Now let'southward execute some of the examples to empathize how to use CSS property values.

Background Repeat

Here nosotros are trying to add couple of background images wherein the showtime epitome will announced only one fourth dimension and the second image will be repeated. Nosotros are using background-repeat to do so.

<!DOCTYPE html> <html> <caput> <style> body { background-image: url("bg2.jpg"), url("bg3.png"); background-repeat: no-echo, repeat; background-color: #cccccc; }  </manner> </caput> <trunk> <p>Document Torso</p> </body> </html>

Moving on with this article on Groundwork Image In HTML

Using Class

In this example, we are creating bg-image with various background properties such every bit epitome, colour, position & repeat. We are targeting the bg-image grade to apply the groundwork properties to the webpage.

<!DOCTYPE html> <html> <head> <style> trunk { margin: 0; font-family: Arial, Helvetica, sans-serif; }  .bg-prototype { background-image: url("bg2.jpg"); background-color: #cccccc; height: 500px; groundwork-position: heart; groundwork-repeat: no-repeat; background-size: cover; position: relative; }  .bg-text { text-align: eye; position: absolute; pinnacle: 50%; left: 50%; transform: interpret(-fifty%, -50%); color: white; }  </style> </caput> <body> <div class="bg-paradigm"> <div grade="bg-text"> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>About U.s.</push button> </div> </div>  <p>Body Text</p> </trunk> </html>

Moving on with this commodity on Background Epitome In HTML

Linear Gradient

Here we are creating a linear-gradient using two colors(i.e. ruby-red & xanthous) and setting information technology equally the groundwork prototype.

<!DOCTYPE html> <html> <head> <style>  #gradient {   height: 200px;   background-colour: #cccccc;   background-paradigm: linear-gradient(red, yellow); } </mode> </head> <body>     <h1 style="font-size:50px">Edureka</h1>     <h3>Eastward-Learning</h3>     <button>About Us</push button> <p id="gradient">Body Text</p> </body> </html>

Moving on with this article on Background Image In HTML

three Color Gradient

Hither we are creating a linear-gradient using iii colors(i.e. reddish, blue & green) and setting it as the background image.

<!DOCTYPE html> <html> <head> <mode> #gradient1 { height: 300px; background-color: #cccccc; background-epitome: linear-slope(crimson, blue, green); } </manner> </head> <body> <h1 mode="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>Near U.s.</button>  <p id="gradient1">Body Text</p> </body> </html>

Moving on with this article on Background Epitome In HTML

Repeating Linear Gradient

In this example, we are repeating the linear gradient using repeating-linear-gradient() functions and setting it every bit the background epitome.

<!DOCTYPE html> <html> <caput> <manner> #gradient1 { top: 300px; background-color: #cccccc; background-image: repeating-linear-gradient(ruddy, bluish 20%, dark-green 30%); }  </style> </caput> <body> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>About Usa</button>  <p id="gradient1">Body Text</p> </body> </html>

Moving on with this article on Background Image In HTML

Radial Gradient

Here nosotros are creating a radial-slope using two colors(i.east. crimson & yellow) and setting it as the background epitome.

<!DOCTYPE html> <html> <head> <style> #gradient1 { height: 300px; groundwork-colour: #cccccc; background-image: radial-gradient(green, cherry); }  </manner> </head> <body> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>About Us</button>  <p id="gradient1">Body Text</p> </body> </html>

3 Colour Radial Gradient

Here we are creating a radial-gradient using three colors(i.e. red, blue & green) and setting it as the background image.

<!DOCTYPE html> <html> <head> <style> #gradient1 { height: 500px; groundwork-colour: #cccccc; background-image: radial-slope(red, blueish, greenish); }  </style> </head> <trunk> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <push button>Near United states of america</button>  <p id="gradient1">Body Text</p> </body> </html>

Moving on with this commodity on Background Image In HTML

Repeating Radial Gradient

In this example, we are repeating the radial gradient using repeating-radial-gradient() functions and setting it as the groundwork image.

<!DOCTYPE html> <html> <caput> <style> #gradient1 { height: 200px; groundwork-color: #cccccc; groundwork-image: repeating-radial-gradient(red, blue 10%, green 20%); }  </style> </caput> <body> <h1 style="font-size:50px">Edureka</h1> <h3>East-Learning</h3> <button>Virtually U.s.a.</button>  <p id="gradient1">Body Text</p> </body> </html>

Now afterward executing the higher up snippets yous would have understood how to insert background image in a webpage using HTML & CSS. I hope this blog is informative and added value to y'all. With this, we come to ann stop of this commodity.

Cheque out ourFull Stack Web Developer Masters Programwhich comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to piece of work with back-end and front-finish web technologies. Information technology includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for the states? Please mention it in the comments department of this blog and we will go dorsum to you.