Background In CSS

Background In CSS

Hello and welcome once again.

So far we have covered a lot.

And we also now know that each element is indeed a box which can have different properties including

the text properties that we discussed earlier and among various different properties.

The elements can also have the background properties as well.

In order to stay in the background and these other different properties that we are going to be covering

in this lesson.

So let’s get started and begin with the first one which is back on color.

So the background color property is quite obvious from the name itself helps us apply the background

color to the element.

So let’s take a look.

And here we have our HTML file and you can see over here that this is the HTML cord and we have the

stiff element over here which we are not able to see here on the browser because there’s nothing inside

this div element at the moment.

And when there’s nothing inside we don’t really see the element most of the times because by default

the border property is set to none as we saw earlier.

And at the same time the default value is set to transparent.

So we don’t really see the background of the elements either.

So let’s apply the background color property to this div element.

Let’s add some color.

So I go back to the style sheet and then I’m going to select the div element and I can use the class

selector here because we have a class for this div element.

So I copy this one again.

Background In CSS

And let’s also give it a weight and height.

I’m gonna make it a responsive unit.

So let’s make it 60 percent and for height let’s make it 40 percent.

And at this point we still won’t be able to see the def element cause we still don’t have any background

color or any bolder color.

So let’s first add the border as well.

I’m gonna make it black save it ,then I reload.

And there we have this.

Now interestingly this div element doesn’t really have any of the border except the top border even

though we give it a height of 40 percent.

We don’t really see a height over here but we only see is the word.

And the reason is that the default rate of an element is that 200 percent which means that if I’m setting

the weight of 60 percent which is as we know is a relative unit.

So it’s gonna be dependent upon the parent element and the parent element of the div is the header because

it’s inside the header element and then the default width of the header element is a hundred percent.

So this word is gonna be 60 percent off hundred percent which is coming out quite well.

It’s actually 60 percent of the screen size.

But what happens when we said when we tried to set the height and we tried to set the height we kind

of run into a problem.

And the reason for that is the default height is not set to 100 percent.

In fact the default height is auto which means that the height would be as much as the size of the elements

of the size of the content inside.

So if there’s no content over here the height is zero as soon as we start adding something inside.

Let me go back to the document and let me add for example an H2 element

and let’s write something inside.

This is under heading and I’ll save it and then I reload.

Now I can see some height over here

but in case we don’t really want to keep anything inside the death element but we still want to give

it a height we can either specify a height for the for the header element that is the parent element

so I give it a height of let’s say 400 pixels again if I said it in person days then it’s going to be

dependent upon the parent element which again will be auto.

So it will still not work.

And so if I save it now and I reload and this time this height of 60

40 percent is going to be 40 percent

or 400 pixels but there’s still a problem like what’s the point of setting a relative unit or a responsive

unit when we are setting an absolute unit over sheer so another fix for this is to use other measurement

units for the height when we haven’t really specified any height for the parent element and what we

can use in that case is something that I also prefer much more than this one is which which is for view port

height and in fact for the width as well let’s make it B/W Or the view port word.

And now these height and weight are gonna be in accordance with the screen size.

So I say it again and then I reload and there we have our width and height and it’s responsive as well

I lower the screen size then you can see over here that it’s responding pretty well so that’s the reason

behind setting though the B/W and we each to make it more responsive.

All right so let’s finally add the background color so I can type background color and then I can use

the color name I can also use the hex values or HSL values.

So let me first choose a color from the website.

It’s dismal color codes dot com

but yes we can do it on Google as well by typing each different color picker.

And let me just select something in green

I can now copy any of the values hex values is easier because I just have to copy and paste it directly

paste it or we’ll share

and then I go back to the website and then I reload and there we have to color now in the background

we can provide the background color for any of the elements in the HTML document which means that I

can set the background color for this H1 and I can also set the background color for the entire body

let’s actually try different values for them.

So let me do for example each one and I’m going to make it a bit specific using the descending contaminator

so let’s type header H1 and then inside let me add the background color property and then let’s pick

another color from here.

Let’s choose something and read let’s make a lighter shade

that’s fine.

And then I can copy this one I copy it and then I can type out R.G.B. and then inside I can paste it.

That’s the reason why I chose the hex values cause we don’t really have traditionally typed out R.G.B.

and I’ll save it.

And then I reload.

now we have the background color for the each one as well.

And do you see that it spans the entire windows high scores elements by default have a hundred percent

of it.

All right likewise.

Let me add the background color for the body as well.

And then exclusive background color and let’s choose a shade of blue this time.

A lighter one would be good just for demonstrating purpose.

OK.

Copy it.

Background In CSS

And again I can use any of the different ways of colors.

Save it and then I’ll reload.

And now we have the background color for the entire body of the page as well.

So if you have a website where you want to set a background color for the entire page then you can simply

pick up the body element and then add the background color property as simple as that.

So this is about the background color property.

Let’s now move on to the other property which is back on image and using it is very simple.

All we have to do is let’s say for example I want to add a background image for this div element.

So I just type background image and then I have to type you are all to provide the location of the image

that I’m going to select for this one.

After this point it works the same as the source attribute for the image tag just like we select the

image location for the source attribute inside the image tag we can select the location here inside

the you URL.

The only difference is that we have you are all here.

Now I’m going to select this image for this and this image is inside the image folder.

But this image is not in the same folder or where we have to style don’t see as says file.

So we have to go over follow her up.

And then we have to select the image folder and then we can go back to the image again.

Can you can refer to the lesson on adding images to learn more about it.

So I just typed two dots slash and then the name of the folder which is image slash image one dot JP

I save it again then I reload.

And here we have the image added.

And let me show you that image as well that I have just added I click on this image and then we have

to image.

Now you can see that since the div the size of the div element is too small to showcase the entire image.

And we see I think this portion of the image at this moment however we can choose to select a specific

portion of the image to showcase over here for that we can use another property which is that crown

position

and don’t forget to add the semicolon at the end.

So I’m gonna type background position

and then we can provide to position the starting position and the position towards which we can select

it and the default value are top left to starting position is the top and it goes towards the left left

portion of the image.

That’s why we see only this much.

So if I save it and then I reload and we see there is no difference cause this is the default value

but we can set other things as well like if I want to showcase the bottom left portion of the image

then I reload.

And now we can see the bottom left portion of the image this portion.

And likewise we can add various different combinations like left bottom top left bottom center or even

center center center and center save it and reload.

And now we have the center portion of the image in fact if we add only one value over here then the

second value is assumed to be center itself.

So if I save it and then reload nothing changes.

So this means that if I choose to type only top and no other value after this and I reload then it’s

gonna be top center all right.

Now apart from adding the names we can also specify the position using the different units absolute

or relative units for instance I can select pixels as well like I select I want to select the image

from 400 pixels and towards 600 pixels save it and then I reload.

Now we have this portion of the image selected and just like these pixels we can also add percentage.

So if I add let’s say 10 percent and here I can say let’s say 50 percent save it and then reload.

Then here we have this portion of the image and and in fact we can use a combination as well like here.

If I take center along with the person H and then I reload then it folks the same way.

Oh let’s make it 50 percent.

Save it and then reload it looks also now again we are still not able to showcase the entire image.

We can only select a portion of the image and up to this point we can only decide which portion of the

image to be showcased.

But in this much container that we have which justice in this case so I’m going to talk about the next

property which is gonna let us scale the image down all the way to fit this container and that property

is background size.

So if I type background size and I can add different values the default value is also

again I can specify the vertical height of the of the image.

And since we have the weight of the div element and 60 EW and height as for the ,let’s try the same

values over here as well.

So I type 60 EW space and for height I type 43 edge if I save it.

And then if I reload then we can see the entire image over here because the height and weight of this

image is exactly as the height and weight of the div element.

So this is one way of showcasing the entire image another way is quite simple as well.

In just one word we can set the value as cover and we’ll discover does it tries to scale down automatically

the image in order to fit the entire container.

But sometimes it can even cut the image here in this case we don’t see this so let me add that image

to the body element as well.

So let me add the background image and let’s set it and and for this background image I’m going to select

this image which is right in the same folder where we have to see a sense folder.

So we only have to go one folder up and directly select the image.

So two loads for one folder up Slash.

And then the image name image 0 1 door TBS

and now we have to back background image for this body element as well.

Again a problem here is that we are not able to showcase the entire image.

So here also let me set the background size to cover

when the image is small and it’s not able to fit the entire background then it kind of repeats automatically

what we can said this property to all face well I’ll come to that a bit later but the problem here is

that this image is ending over here it’s killing downward so I’m scaling up to this entire base size

and generally color property what it does is it fills in the entire container.

Now here it is repeating it.

And if we have said the repeat property to off then it will only end up to here.

And the reason for that is I said the Bordeaux property

we just need to see where exactly are the dimensions of the body element at the moment and I’ll reload

the page.

And here we can see the size of the body element.

Can it.

Can you guess why.

Well I think you guessed it right.

Well this is because the just like any other element the height of the body element is also set to auto

which means the size of the body element is going to be as much as the size of the contents inside.

And since everything is inside the body element and ending over here this is the last content we have

which is the stiff element.

It spans only this much.

Now here comes a trick now if I set the height of the body element hundred we edge.

So now it’s gonna be a hundred percent of the screen size if I refresh the page.

Now you can see that now this image is covering the entire page.

We are still using the background size as cover to cover property is showcasing the image and trying

to fit the entire container.

Now again a problem over here is that if we look at the image it’s this much white.

But here we don’t really see the entire weight of the image.

It’s only up to this much.

This is because even though the color even though the color property and shows that it fills the entire

container and even scales the image up and down in order to fit that properly it doesn’t really play

with the aspect ratio of the image.

So it’s likely to cut the image of the aspect ratio is getting impacted

still want your image to be exactly the same size.

Then again you can use it as hundred VW and height as 100 v etch.

If I save it now and then I reload and you can see that the aspect ratio has been a little bit distorted

because we have forcefully tried to set the width and height up to the screen size and this image by

default has a broader width as compared to the height.

So next value that we have in this option is what we call as contained.

And when we said the value is contained then it shows that the entire image is visible.

If I save it and then if I reload here you can see again we have this image only up to this point because

it’s trying to make sure that the entire image is visible.

Likewise if I said this one to contain as well and see it over here and here you can see that the entire

image is concentrated only to this much of size.

You can see a little bit of reputation overshoot.

This image is starting again.

Right.

So this contain property is going to add the background image but it’s also going to make sure that

the aspect ratio the resolution of the image is not getting stretched or compressed.

It’s going to make sure that the entire image is visible.

So you can use it when you always want to make sure that the entire that the entire image is visible.

All right.

So after that we can use the background repeat property

and set it to no repeat when we set the property to no repeat and then image repetition is set to off.

If I refresh the page now and you can see that we only have this image up to this portion and even though

we have some space over there this image is not repeating other options we get apart from this.

No repeat is repeat x and repeat y.

So the repeat x option.

Make sure that the image is repeating only horizontally and not vertically.

And likewise when you are setting the value as repeat Y then it’s going to make sure that the image

is repeating only vertically on the y axis but not horizontally.

So if I said it to let’s say repeat y same it and then reload then now this image is repeating vertically

but in this case it it’s still not going to repeat horizontally even if we increase the screen size.

Likewise if I said it to repeat x and see it again then it’s not repeating vertically but if it gets

a chance to repeat horizontally it will do OK.

Now likewise

repeat property and set it to let’s say repeat y save it.

And now you can see over here that this image is actually repeating horizontally and not vertically.

So if I reload the page we can see that it is not repeating horizontally because we have said the y

axis as the axis for repetition.

So if I said it to X and then save it and then reload.

Now we are letting it repeat horizontally but if it had to repeat vertically it voluntarily do so here

you can set it to repeat if you want your image to repeat which is also the default value or you can

set it to no repeat.

If you don’t want your image to repeat great.

Lastly let’s talk about the next property which is back on attachment property

and the default value is cruel.

So if I said it to scroll save it and then reload.

Now if I move the page up and down then you can see that this image is also moving up and down.

And likewise if I set the background attachment property to this div element

and set it to scroll again save it and then reload again.

We don’t really see much over here we can’t really see that.

Let’s add some content over here in order to see it.

So I go back

let’s let’s add some each one element in order to fill up some space

and let’s add a few more I’m going to copy paste a few times

save it and then I reload we have all these headings inside the div element but here what we see is

these are actually coming out of the div element they don’t release stay inside the div element.

Well this is something that we call overflow.

So this time when the size of the contents goes beyond the size of the container itself which is def

in this case then they come out of it.

So there’s a property for that too.

And that property is not really a background property but I think we can use that as well.

It’s a good property to know that property is called overflow property.

So quite simple.

And we also have and we also have these overflow x and y just like we have repeat x and repeat Y.

I’ll show you how

now we can see that all the content has gone inside the container and we have these scroll bars to access

the remaining portion of it another value we can set is hidden.

So if we set the value to hidden then this time the contents are not going to come out.

They’re also not going to be accessible they’re going to be hidden wherever is outside the size of this

container element is going to be hidden inside.

Now the overflow x property will give the scroll bars only on the X side

so here right now we have the x overflow hidden so the expulsion is going to be hidden but for the life

portion we’re still getting this scroll bar it’s set to scroll by default if I said if I said to overflow

y two hidden and save it and reload.

Then here we don’t have any scroll bar now because the y axis is hidden and for the x axis since it’s

not really broader in size than the container element.

So we don’t really get a scroll bar overshare.

So this is how the x and y axis work even in this day are much similar to repeat x and repeat y.

Okay.

So let me change it back to scroll and reload.

And now we have these scroll bars.

So the reason why I added the scroll bars I have said the background attachment to scroll which means

that if I scroll the page if I if I scroll down

in fact let me add some heading elements for this body element as well.

So I go back I should have added that for the body yes when I copy and then after this header I add

inside the body element as well.

I know reload the page and now we have scroll bars on the body of the page as well.

So now you must be able to see that this image is going up and down when we are scrolling up and down.

And likewise this image also is going up and down like scrolling the page right now.

What if we want this image to scroll up and down as well when we are moving this content up and down

you see inside this image inside the container is not responding to the contents just like this one

when we move this content up and down to the image behind is also moving up and down.

But when we are doing trying to do this inside this div element it’s not happening.

So in that case what we can do is we can set the background attachment to local and now in this case

it’s gonna move up and down with the element with the content.

So if I reload the page now and then if I tried to scroll up and down then this image you can see over

here and it’s also moving up and down see this.

Now it’s working fine.

Now then it has to scroll up and down to respect to this one.

Notice it has a bit of shift in the position we can anyways correct that.

Using this position or overshare because we have now for example if we said the starting position to

let’s say 20 percent and then here we can set it to let’s say top save it and then reload.

Now we can see the image back so changing few properties might make you change few of their properties

as well.

And now the last one that we get which is quite interesting one is fixed.

So when look when we said it as fixed and then we see it again then first of all you’re going to see

that this time in fact let me first show it to you on the body element.

So background attachment I set it to fixed I save it and then save it and then reload.

And now the difference that you are going to feel is that this time when I scroll up and down this image

is not really going to move up and down.

So I scroll.

Scroll down to see this effect now.

We have this image not moving up and down and we have this nice effect where only the content is moving

up and down.

Likewise if I move up and down this image is also not moving.

Now there’s a problem with this image we had scaled this image down to the quantum container level and

now this image has scaled back.

This is because when we said the background position property to fix then it’s gonna break out of the

regular flow and it’s gonna behave in accordance with the screen size.

So this is fixed with respect to this entire debate screen.

That’s why the contain option is with respect to this space size likewise.

If I said it to cover then also this conflict is not going to be solved it’s again going to be the same.

So in this case also what we can do is we can specify the width and height.

So let’s say for example 60 we for example the weight as 60 VW and height as 40 v edge.

I now save it and then I reload again.

This image is up it’s still not within the container because this image is no longer behaving with respect

to the container element.

It’s rather behaving with the screen size background position starts from 20 percent right.

So it’s going to behave with the screen.

Similarly it starts from the top.

And therefore 43 edge of height is gonna start from the top and going all the way up to here.

So that’s why if I said it to let’s say 0 percent and then here I said it to let’s say 20 percent I

now save it and then I reload then it’s quite quite adjusted overshare

now let’s take a look at the effect.

So if you see overshare we are moving the page up and known.

Much noticed this image inside it remains fixed.

Right.

It’s not really moving up and down.

It remains fixed with the page.

It’s kind of giving a very nice effect to see this.

So this is how it works.

But always remember that when you’re setting it as fixed and it’s gonna respond to the screen and not

to this element before we finish.

Let me also tell you about a shorthand way of adding different background properties together just like

we saw in the case of margin and padding.

We can also use just one property called background.

And here we can follow an order in order to add different things like for example.

First we can add the background color.

Let’s make it for example red or let’s use the same color which we have added over here copy and then

pasted over here and then space.

And then after that we can add the image.

So I can copy this image you are all from here copy it pasted followed by space and then after that

I can set the repeat property which is set to repeat X..

So let me copy that as well.

Copy and paste it at me first do a soft wrap so that we can see the entire stuff over here.

It’s continuing to the next line.

I press space again and then I can add the background attachment and I have set it to fixed over here

and then we can add the background position.

So we haven’t really added any background position so I can skip as well but if I want I can set it

to top left which is anyways the default value.

So these are the different values that we can set all together but this doesn’t really cover the background

size option.

So for the background size we can again added size

cover save it and then I can get rid of these lines

because contain save it.

All right.

Now I can just get rid of these other lines

cause I have added all those properties in just one line.

So you see now we have reduced the size.

And if we just enlarge this window then we have actually brought all the different values.

And just one line.

So this is a shorthand way.

And if you don’t have any of these values then you can just choose to skip that like I can get rid of

the fixed option I can save it and then reload.

It still works.

It’s not fixed any longer.

That’s the only difference.

All right.

So then we are rating various different back on properties we can simply use this shorthand way.

It’s really gonna help you save your time as well as space on the CFS document so you can start using

them and play around with these different values and properties and see for yourself what different

values lead to what different outputs.

So this was about the background keep learning and see you in the next lesson.

Leave a Reply

Your email address will not be published. Required fields are marked *