HDTutorial
EN
how to add background image in html

Playback starts YouTube’s embedded player (privacy-enhanced mode).

how to add background image in html

580,078 views October 25, 2016 4:36

Watch on YouTube
ChannelCode Grammar

Chapters

Description from the creator

In this HTML tutorial, we’ll learn how to add background images to a webpage using CSS. You’ll see how to set colors, insert images, control tiling, and stretch the image to fit the full browser window.

This css tutorial covers:
Adding background colors with inline CSS
Using [background-image: url()] with an image from the web
Controlling repeat behavior with [no-repeat]
Scaling images with [background-size] (100%, 75%, etc.)
Stretching across width and height
Moving CSS from inline [style] attributes to the [style] tag for cleaner code

This tutorial is beginner-friendly and shows step by step how to make your webpage background look professional with images instead of just plain colors.

⏱️ Timestamps

00:00 – Intro: adding backgrounds in HTML
00:21 – Two ways: style tag vs inline style attribute
00:30 – Adding background color (black, yellow, etc.)
01:01 – Using [background-image: url()] with external images
01:19 – Example with tiled background
01:43 – Using [no-repeat] to show a single image
02:12 – Stretching background with [background-size: 100%]
02:41 – Scaling X and Y independently (100% 100%, 75% etc.)
03:26 – Best practice: moving CSS from inline style to [style] tag
04:00 – Organized code vs quick inline changes
04:26 – Summary and conclusion

🏷️ Tags
html tutorial,html background image,css background image tutorial,add background image html,html css backgrounds,background-size cover,background no-repeat,html beginner tutorial,css tutorial for beginners,background stretch html

About this tutorial

Code Grammar published this 4:36 video tutorial on October 25, 2016. It has been watched 580,078 times on YouTube.

Category
Education
Duration
4:36
Published
October 25, 2016
Views
580,078
Likes
3,501

Tags

Share

Further reading

  • How to Add an Image & Background Image in HTML blog.hubspot.com

    If you’d like to set an image as the background of a web page or an HTML element, rather than simply inserting the image onto the page, then you’ll need to use the CSS background-image property. This CSS property replac…

  • HTML Background Images - W3Schools w3schools.com

    Background Image on a HTML element. To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property: Example.

  • How to Set a Background Image in HTML - wikiHow wikihow.com

    1. Upload the background image. 2. Open the HTML file. 3. Add the head of the HTMLdocument using the ' and ' tags. 4. Insert the and tags between the "Head" tags. 5. Add the body {element. 6. Add background-image: url("…

This tutorial in other languages