How To Set Background Image For Header In Html

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

Background Image in HTML
CSS groundwork-image Belongings
Background Echo
Using Class
Linear-gradient
3 Color Gradient
Repeating Linear Slope
Radial Gradient
3 Color Radial Gradient
Repeating Radial Gradient

Moving on with this article on Background Image In HTML

Background Image In HTML

In that location are various means in which images can be added to a web page to make it look captivating & appealing. One of such ways is adding background prototype. In this web log we will understand how nosotros can add groundwork images in a webpage using HTML & CSS. The about mutual & unproblematic way to add background image is using the background image attribute inside the <body> tag.

Case

<!DOCTYPE html> <html> <torso groundwork="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 aspect which we specified in the <body> tag is not supported in HTML5. Using CSS properties, we can besides add background image in a webpage.

Let us beginning understand how we can add background image in a webpage using CSS. Afterwards moving ahead, nosotros volition look at different CSS backdrop using which nosotros can change the look & feel of the webpage.

CSS background-epitome Property

In all the examples, we volition be defining the CSS code inside the <way> tag. We will also wait how to target div tag and course using CSS. In the beneath example, we are specifying the background-image & background-color CSS holding which will set the background image & background holding for the HTML trunk respectively.

Moving on with this article on Background Image In HTML

Case

<!DOCTYPE html> <html> <caput> <style>  body {   background-prototype: url("bg1.jpg");   background-color: #cccccc; } </style> </head> <body> 	<p>Certificate Body</p> </body> </html>

Y'all tin can also go alee and add ii background images for the <body> element.

Case

body { background-epitome: url("bg3.png"), url("bg1.jpg"); background-color: #cccccc; }

Notes:

The background image 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 prototype is unavailable, then the background-color property will exist used and the same will be displayed.

At present before understanding how nosotros can use dissimilar CSS property values, let'southward look at the listing of CSS property values associated with the groundwork image.

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

Moving on with this article on Background Image In HTML

Now let's execute some of the examples to understand how to use CSS property values.

Background Repeat

Hither we are trying to add couple of background images wherein the first epitome will appear just 1 time and the second image will be repeated. Nosotros are using groundwork-echo to do and then.

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

Moving on with this article on Groundwork Epitome In HTML

Using Class

In this instance, we are creating bg-prototype with diverse background backdrop such every bit image, color, position & repeat. We are targeting the bg-image class to apply the groundwork properties to the webpage.

<!DOCTYPE html> <html> <head> <fashion> body { margin: 0; font-family: Arial, Helvetica, sans-serif; }  .bg-prototype { background-image: url("bg2.jpg"); background-color: #cccccc; height: 500px; groundwork-position: heart; background-repeat: no-echo; background-size: cover; position: relative; }  .bg-text { text-marshal: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }  </style> </head> <body> <div form="bg-paradigm"> <div grade="bg-text"> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>Almost Usa</button> </div> </div>  <p>Trunk Text</p> </body> </html>

Moving on with this article on Background Epitome In HTML

Linear Slope

Here we are creating a linear-gradient using 2 colors(i.e. cherry-red & xanthous) and setting it equally the background image.

<!DOCTYPE html> <html> <head> <fashion>  #gradient {   height: 200px;   background-color: #cccccc;   groundwork-image: linear-gradient(red, yellow); } </manner> </head> <body>     <h1 fashion="font-size:50px">Edureka</h1>     <h3>E-Learning</h3>     <push button>About Us</button> <p id="gradient">Torso Text</p> </torso> </html>

Moving on with this article on Background Paradigm In HTML

3 Colour Gradient

Here we are creating a linear-slope using three colors(i.e. reddish, blueish & green) and setting it every bit the background image.

<!DOCTYPE html> <html> <head> <style> #gradient1 { summit: 300px; background-color: #cccccc; background-prototype: linear-gradient(red, blue, green); } </mode> </head> <body> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>Nearly Us</button>  <p id="gradient1">Body Text</p> </torso> </html>

Moving on with this article on Groundwork Prototype In HTML

Repeating Linear Gradient

In this example, nosotros are repeating the linear gradient using repeating-linear-gradient() functions and setting information technology every bit the background image.

<!DOCTYPE html> <html> <caput> <manner> #gradient1 { meridian: 300px; groundwork-color: #cccccc; background-image: repeating-linear-gradient(red, blueish xx%, green 30%); }  </style> </caput> <trunk> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <push>About Us</button>  <p id="gradient1">Body Text</p> </torso> </html>

Moving on with this commodity on Groundwork Image In HTML

Radial Gradient

Here nosotros are creating a radial-gradient using two colors(i.e. red & xanthous) and setting information technology as the background prototype.

<!DOCTYPE html> <html> <caput> <way> #gradient1 { height: 300px; background-color: #cccccc; background-image: radial-gradient(dark-green, red); }  </style> </head> <torso> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>Well-nigh Us</push>  <p id="gradient1">Body Text</p> </torso> </html>

3 Color Radial Gradient

Here nosotros are creating a radial-gradient using three colors(i.due east. red, blue & green) and setting it equally the groundwork image.

<!DOCTYPE html> <html> <head> <style> #gradient1 { height: 500px; background-color: #cccccc; background-image: radial-gradient(red, blue, light-green); }  </mode> </head> <torso> <h1 style="font-size:50px">Edureka</h1> <h3>E-Learning</h3> <button>Almost Us</push>  <p id="gradient1">Body Text</p> </torso> </html>

Moving on with this article on Background Image In HTML

Repeating Radial Slope

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

<!DOCTYPE html> <html> <head> <style> #gradient1 { height: 200px; background-color: #cccccc; groundwork-image: repeating-radial-gradient(red, blue x%, green 20%); }  </style> </head> <body> <h1 style="font-size:50px">Edureka</h1> <h3>East-Learning</h3> <button>About Us</button>  <p id="gradient1">Body Text</p> </torso> </html>

At present after executing the above snippets you would accept 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 up to ann end of this article.

Bank check out ourTotal Stack Web Developer Masters Programmewhich comes with teacher-led live training and real-life project experience. This preparation makes you skilful in skills to work with back-cease and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

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