How To Set Header Background Image In Html

CSS Tutorials

CSS Background Image: Pace-by-Stride Guide

The CSS background prototype property changes the background of a website to an epitome. A background prototype is fix using the background-image: url(url_of_image) property. You can specify multiple background images that overlap using the groundwork-image holding.

Groundwork images are a common characteristic on modern sites that create an aesthetically pleasing user experience. Web designers customize this characteristic based on unique predetermined themes through the CSS groundwork-image property.

This tutorial and examples will get you familiarized with this CSS holding. By the end of this commodity, yous volition be an expert on customizing background images.

Detect Your Bootcamp Friction match

Career Karma matches you with top tech bootcamps

Admission exclusive scholarships and prep courses

Select your interest
First name

Final name

Email

Phone number

By continuing y'all agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

CSS Background Paradigm
CSS Background Epitome Example
CSS Multiple Background Images
Background Image Size
Position Background Image
Decision

CSS Background Prototype

The background-image holding defines an paradigm as the background for an chemical element on a web folio. It is frequently used to gear up the background of an entire page, or a department of a folio.

When you lot are designing a web page, you must determine whether the end product volition feature a background paradigm.

For case, you may want a grouping photo of squad members in the background if you are designing an 'Nigh Us' folio. If you are designing a website for a café, consider calculation a header on a page displaying an image of a cup of coffee.

The groundwork-paradigm property adds images equally a background to a HTML element. You tin add a background image to an element using the following syntax:

groundwork-image: url(imageUrl);

"Career Karma entered my life when I needed it most and quickly helped me friction match with a bootcamp. Two months afterward graduating, I establish my dream chore that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

imageUrl refers to the location of the image y'all wish to brandish.

CSS Groundwork Epitome Example

We are working on a project designing a site for a local café chosen 'The Coffee Grind.' The coffee shop has asked us to create a top page imprint, displaying a stock prototype of a loving cup of coffee. This imprint is to have 'Welcome to The Java Grind" in the middle.

We could create the imprint using the following code:

index.html  <div course="image"> 	<p class="header">Welcome to The Coffee Grind</p> </div>  styles.css  .prototype { 	background-image: url(https://images.pexels.com/photos/683039/pexels-photograph-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); 	elevation: 250px; }  .header { 	padding-top: 50px; 	color: white; 	font-size: 20px; 	text-align: centre; }

Our code returns:

Let u.s.a. interruption downwards our code. In our HTML file, we defined a <div> tag with the grade "header". This tag shows the text "Welcome to the Coffee Grind" on the web folio.

In our CSS file, we divers a rule for a HTML form chosen "image." This ready a background image for our imprint and set up the height of our banner to 250px. We then defined a class called "header", which is used to way the text in our header.

The "header" form applies a 50px padding to the summit of our header text. The "header" grade sets the color of the text to white. Our styles set the font size of the header to 20px, and aligns the header to the center of the element.

CSS Multiple Background Images

The background-prototype property lets you assign multiple background images to an element in CSS. The syntax for using multiple background images is as follows:

background-prototype: url(image1), url(image2);

The first paradigm specified will appear at the top of the element, and subsequent elements will appear behind each other. Suppose we wanted to add an icon of a coffee cup to the front end of our banner. We could exercise so using this code:

index.html  <div class="image"> 	<p class="header">Welcome to The Coffee Grind</p> </div>  styles.css  .prototype { 	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photograph-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); 	superlative: 250px; }  .header { 	padding-meridian: 50px; 	colour: white; 	font-size: 20px; 	text-align: center; }

Our code returns:

As you can see, our coffee loving cup icon has been added in front of our background prototype. Our icon simply appears at the front end because we specified information technology equally the kickoff groundwork image in our list of groundwork images.

Background Prototype Size

When you are working with the background-image belongings, you may desire to customize the size of the background image inside its container. The background-size property is used for this purpose.

The background-size property accepts four possible values. These are:

Auto: This value tells the web browser to determine the best size for the background image (default).
Contain: This value instructs the browser that the bodily image size should exist visible fifty-fifty if information technology does not fill the container. If a picture is too pocket-sized to fill a container, it will appear in its total size. White infinite will be left in the areas the picture cannot make full.
Cover: This value instructs the browser to stretch out the image to be the size of the whole container.
Length: This is the width and height of the background image. The showtime value specified sets the width of the image, and the second value specified sets the meridian.

Changing the Groundwork Size

Suppose we wanted our coffee banner image from earlier to exist contained within our element. This means the total paradigm should exist visible, even if it does not fill the container. Nosotros could practice and so using this code:

index.html  <div grade="prototype"></div>  styles.css  .prototype { 	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?automobile=compress&cs=tinysrgb&h=750&due west=1260); 	background-size: contain; 	height: 250px; }

Our code returns:

As you lot tin can encounter, different our first example, our entire background prototype is visible. This is because we specified the groundwork-size property in our code and set its value to comprise . Alternatively, we could have used the cover value if we wanted our paradigm to encompass the size of the whole container.

You can besides specify a pixel size for the image. Let us say we want our style paradigm to be 200px tall by 200px wide. We could practise so using the post-obit code:

index.html  <div class="image"></div>  styles.css  .image { 	groundwork-epitome: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=shrink&cs=tinysrgb&h=750&w=1260); 	background-size: contain; 	summit: 200px; 	width: 200px; }

Our code returns:

In this instance, our image is 200px wide by 200px long.

Position Groundwork Image

The background-origin property allows you to position the background image according to the content, borders , or padding of a spider web element.

The background-origin belongings accepts three potential values:

Border-box: Positions the epitome to appear relative to the edge box.
Content-box: Positions the image to appear relative to the content box.
Padding-box: Positions the image to appear relative to the padding box (default).

To learn more nearly borders , content, and padding, read our guide to the CSS box model .

Let's say that we desire to adjust the positioning of our image. You could, for example, make a groundwork prototype to appear relative to the content box using the post-obit lawmaking:

index.html  <div grade="image"></div>  styles.css  .epitome { 	groundwork-image: url(https://images.pexels.com/photos/683039/pexels-photograph-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); 	border: 10px solid black; 	padding: 25px; 	background-origin: content-box; 	groundwork-repeat: no-echo; 	elevation: 250px; }

Our lawmaking returns:

In this example, our background image appears relative to the content box. As you tin meet, there is a white gap between our image border and the groundwork image. This shows the relative background position in which our prototype appears.

We achieved this by specifying the background-origin: content-box holding. We specified the background-repeat: no-repeat holding. This property limits our image to its content box. The image will not appear in the blank space created past the groundwork-origin property.

Conclusion

Nosotros use the background-epitome belongings to set the background of an element to an image in CSS. This technique allows you to create custom backgrounds from images. This is an alternative to using colors or gradients.

In this commodity, nosotros discussed how to apply the groundwork-image belongings and how to style a background image in CSS. At present you lot have the cognition you need to start designing groundwork images in CSS similar an expert.

About united states of america: Career Karma is a platform designed to aid chore seekers discover, research, and connect with job training programs to accelerate their careers. Learn near the CK publication.

What'south Side by side?

Want to take action?

Get matched with elevation bootcamps
Want to swoop deeper?

Ask a question to our community
Want to explore tech careers?

Accept our careers quiz

James Gallagher

Well-nigh the author: James Gallagher is a cocky-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others. He as well serves equally a researcher at Career Karma, publishing comprehensive reports on the bootcamp market.

Career Karma

Observe the right bootcamp for you

Many careers in tech pay over $100,000 per year. With help from Career Karma, you can notice a preparation program that meets your needs and will set you lot up for a long-term, well-paid career in tech.

Select your interest
Showtime name

Last proper name

E-mail

Phone number

By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

A person sitting on a dark green chair with a laptop on their knee