CSS Tutorials: CSS Background | Background Image | background Color - video Dailymotion

Web Artificer

In this tutorial of CSS you will learn about Background used in CSS, we will discuss and understand about Background Color and Background images. We will learn how we can use both background properties to make an interactive and eye catching website #CSS #background #webdesign #frontend #coding #design #webdevelopment #html #css3 #codinglife #programming #developer #codingtips #codingcommunity #webdev #codingjourney #codingisfun #learntocode #codinglove #codeeveryday#ColorPalette #DesignInspiration #CreativeIdeas #VisualAesthetics #ColorTheory #GraphicDesign #ArtisticExpression #ColorCombination #DigitalArt #ColorScheme #ColorInspiration #BackgroundDesign #ColorfulBackground #ArtisticBackground #ColorfulDesign #BackgroundArt #ColorfulPalette #DesignTrends #ColorfulArtwork #ColorfulCreativity#backgroundimage #photography #artistic #visuals #design #graphicdesign #digitalart #creativity #aesthetics #backgrounddesign #artwork #visualart #backgrounds #wallpaper #illustration #art #creative #backgroundphoto #photooftheday #inspiration #beautifulb #webartificer1

Transcript

00:00Assalam-o-Alaikum

00:02Today we will see in our topic

00:04How we can use backgrounds in CSS

00:06Background colors

00:08Background images

00:10And how we can change their properties

00:12First of all

00:14Let's take a div

00:16Let's give a class name

00:18BG

00:20Now

00:22In this background

00:24I want to

00:26Use a color

00:28I will give a text

00:30Random

00:32I have given a text

00:34And I will give a

00:36Color

00:38Background

00:40Color

00:42Fill color

00:44What is the text color

00:46We will change it

00:48And see

00:50White color

00:52And

00:54As you can see

00:56Here

00:58We have

01:00Background color and text color

01:02Instead of background color

01:04If I

01:06Give

01:08An image

01:10I want an image in the background

01:12So for that

01:14We will use background image

01:16And provide a URL

01:18So in the URL

01:20I have

01:22Image

01:24Image.avf

01:26Channel

01:28So let's go

01:30Let's check

01:36Width

01:38500px

01:40Width

01:42500px

01:44Width

01:46Let's choose width

01:48So

01:50I have

01:52500px

01:54Image

01:56But as you can see

01:58This image is single

02:00But image is repeating

02:02So to end this repeat

02:04We will use a property

02:06Background

02:08Repeat

02:10We will give

02:12NoRepeatByAttribute

02:14So this

02:16We have

02:18Like this

02:22We will

02:24Give

02:26We will select

02:28Invert

02:30Ok

02:32We will

02:34Give

02:36Invert

02:38Invert

02:40Invert

02:42Invert

02:44Invert

02:46Invert

02:48Invert

02:50We change the color of the text, make it white, so that the text is visible.

03:02In this way, we can use our text on our image.

03:07We use 300px, it is too big.

03:15Other than this, we can give position to our image.

03:20Background, Position.

03:25This image is now set.

03:28After this, we need to cover the background size or content.

03:38So, we can change our image with this.

03:43So, this was the topic of our image backgrounds.

03:46We will meet in our next video lecture.

03:50Till then, take care of yourself.

CSS Tutorials: CSS Background | Background Image | background Color

Category

Transcript

Be the first to comment

Recommended