HDTutorial
EN
CSS background image tutorial with examples

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

CSS background image tutorial with examples

14,285 views May 25, 2020 21:03

Watch on YouTube
ChannelDuomly

Description from the creator

This video is a CSS background-image tutorial with examples.

CSS background image property seems so simple that you could think that there's no point to speak about it. But there are a few tips and tricks which I'd like to show you that will change your web development forever.

In this video, I'm going to show you 7 tips and tricks that can do real magic for your layout. We will go through:
1. How to fit a background image perfectly to a viewport?
2. How to use multiple background images with CSS?
3. How to create a triangular background image?
4. How to add a gradient overlay to my background image?
5. How to create a color-changing background image animation?
6. How to make a grid background image?
7. How to set a background image as a text color?

So, would you like to do some magic?

Remember to SUBSCRIBE to our channel for more magic!

For the written version of this video VISIT US at:
blog.duomly.com/css-background-image-tutorial-w…

Full HTML&CSS course: duomly.com/course/html-and-css-basics-course

MEET US:
Website: duomly.com
Blog: blog.duomly.com
Facebook: facebook.com/duomlyapp/
Twitter: twitter.com/duomly
Instagram: instagram.com/duomly_programming_courses/
Linkedin: linkedin.com/company/duomlyapp/

About this tutorial

Duomly published this 21:03 video tutorial on May 25, 2020. It has been watched 14,285 times on YouTube.

Channel
Duomly
Category
Education
Duration
21:03
Published
May 25, 2020
Views
14,285
Likes
379

Tags

Share

Further reading

  • CSS background image tutorial with examples - Duomly blog.duomly.com

    The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there can’t be anything unusual about background-image,…

  • CSS - background-image - Tutorialspoint tutorialspoint.com

    uri − URL of the image. none − Setting background-image to none means that no background image should be used for matching elements. transparent. Applies to. All the HTML elements. DOM Syntax object.style.backgroundImag…

  • CSS background-image property - W3Schools w3schools.com

    The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Tip: The bac…

This tutorial in other languages