Nancyvarkey at 09:13, 15 October 2020

2020-10-15T09:13:06Z

Nehasolanki: Created page with "'''Title of the script: '''Background in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

2020-10-09T14:00:25Z

Created page with "'''Title of the script: '''Background in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

New page

'''Title of the script: '''Background in CSS

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Property, CSS Background, CSS Background-Color, CSS Background Image, CSS Background Repeat, CSS Background Attachment, CSS Background Position, CSS Color, CSS Background Shorthand

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Background in CSS'''”
|-
|| Slide: Learning Objectives
||In this tutorial, we will learn about''' background '''properties of an '''element '''in''' CSS.'''
|-
|| Slide:

System Requirements

|| This tutorial is recorded using
* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
*'''HTML5'''
*'''gedit Text Editor'''
*'''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| Slide: Prerequisite

https://spoken-tutorial.org
|| To practise this tutorial, you should have basic knowledge of '''HTML''' and '''CSS'''.

If not, please go through the '''HTML''' and '''CSS '''tutorials on this website.
|-
|| Slide: Code Files
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.
|-
|| Slide: Background
|| To '''style '''the '''background''' of an '''element''', '''CSS''' has the following properties:

*'''background-color'''
*'''background-image'''
*'''background-repeat'''
*'''background-attachment'''
*'''background-position'''

Let us understand these one by one through examples.
|-
| | Slide: Background Color
|| The '''background-color''' can be set using these formats

* '''Color names'''
* '''Hexadecimal values'''
* '''RGB (Red Green Blue) values'''

Let us try this.
|-
|| Open '''my-css '''folder
|| Go to the practice folder '''my-css.'''
|-
|| Open mystyle.css
|| Let’s open the file '''mystyle.css''' in a '''text editor'''.

I have already opened it in the '''gedit Text Editor.'''
|-
|| [gedit - mystyle.css] Highlight:

background-color: yellow;
|| Here for the '''body''' '''tag''' I have set the '''background-color''' as '''yellow'''.
|-
|| Open Mypage.html in firefox
|| Switch to the '''my-css''' folder.

Now open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox] Highlight the output
|| Observe the output.

The '''background color''' of the page is set to '''Yellow'''.
|-
|| Switch to mystyle.css
|| Let’s do some more changes to the '''CSS''' file '''mystyle.css'''
|-
|| [gedit] mystyle.css

Update:

background-color: #FFFF00;
|| Now I will set the '''background color''' to '''yellow '''using the '''hexadecimal value'''.

The '''hexadecimal value''' of '''yellow''' is '''#FFFF00'''

Update the code as shown.
|-
|| Press Ctrl+S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

The '''background color''' of the page is still '''yellow'''.

Now I will try with '''RGB color code.'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Update:

background-color: rgb(255,102,203);
|| Now change the '''background color''' to '''pink''' using '''rgb '''value.

'''rgb value '''for '''pink''' is''' rgb(255,102,203);'''

Update the code as shown.
|-
|| [gedit - mystyle.css] Highlight:

rgb(225,102,203);
|| '''RGB color''' value is specified with''' rgb(red, green, blue''') ranging between 0 to 255.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now the '''background color''' of the page is set to '''pink.'''
|-
|| Only narration
||We can also set an'''image''' as the'''background''' for an'''element''' using'''CSS.'''

Let us try this.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Type:

background-image: url("tomato.png");
|| Inside the '''body tag''', next to the '''width''' property, type the code as shown.

|-
|| [gedit - mystyle.css] Highlight:

url("tomato.png");
|| The name of the '''image''' along with the path should be written inside the '''url( ) function.'''
|-
|| [gedit - mystyle.css] Highlight:

tomato.png
|| This image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved the other code files.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now the '''image''' is set as a '''background'''.

'''Image''' gets floated according to its '''dimension '''to fit the '''background'''.

If the '''image dimension''' is more than the '''background''' then a single '''image''' will be displayed.

Here the '''image dimension''' is less than the '''background'''.

Therefore multiple '''images''' are displayed.

To control this we have some '''background''' properties in '''CSS.'''
|-
|| Slide: Background Repeat
|| '''background-repeat '''allows to repeat the '''image''' in the '''background''' of an '''element'''.
|-
|| Slide: Background Repeat Values
|| Values of this property are:

* '''repeat-x''': repeats '''image''' horizontally.
* '''repeat-y''': repeats '''image''' vertically.
* '''no-repeat''': does not repeat, shows '''image''' one time.
* '''repeat''': It is the default value, which repeats the '''image''' in both directions.

Let us try this.
|-
| | [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Type:

background-repeat: repeat-x;
|| First I will repeat the '''image''' horizontally.

Inside the '''body tag''', below the '''background-image '''property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browse'''r and refresh the page
|-
|| [Firefox] Highlight the output
|| Observe the output.

Earlier the '''background image''' repeated both horizontally and vertically.

Now it is repeated horizontally because the value is set to '''repeat-x'''
|-
|| [gedit - mystyle.css] Highlight

background-repeat: repeat-x;
|| If you wish to repeat the '''image''' vertically, then set the repeat value as '''repeat-y.'''
|-
|| [gedit - mystyle.css] Update:

background-repeat: no-repeat;
|| Now change the '''background-repeat''' value as '''no-repeat'''.

Update the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browse'''r and refresh the page
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now the '''background image''' is displayed in the '''top left '''corner which is the default position.

It is not repeating.
|-
|| Slide:Background Attachment
|| '''background-attachment''' decides whether to scroll the '''image '''or not, along with the '''webpage'''.
|-
|| Slide:Background- Attachment
||
* '''scroll:''' allows the '''background image''' to scroll along with the page.
* '''fixed''': the '''background image '''remains fixed, it is not allowed to scroll.

Let us try this.
|-
|| Switch to mystyle.css
|| Switch to the '''mystyle.css''' file to try this.
|-
|| [gedit - mystyle.css] Type:

background-attachment: scroll;
|| Now I will set the '''background attachment''' to '''scroll.'''

Inside the '''body tag''', next to '''background-repeat''' property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in text editor
|| Switch to '''my-css''' folder.

Now open the file '''Mypage.html''' in a '''text editor'''.
|-
|| [gedit - Mypage.html] Type:

<nowiki><dl></nowiki>

<nowiki><dt> Dry fruits </dt> </nowiki>
:<nowiki><dd> Cashew </dd></nowiki>
:<nowiki><dd> Almond </dd></nowiki>
:<nowiki><dd> Apricot</dd></nowiki>
:<nowiki><dd> Dates </dd></nowiki>
:<nowiki><dd> Fig </dd></nowiki>

<nowiki><dt> Fresh Fruits </dt></nowiki>
:<nowiki><dd> Orange </dd> </nowiki>
:<nowiki><dd> Mango </dd> </nowiki>
:<nowiki><dd> Apple </dd></nowiki>
:<nowiki><dd> Grapes </dd> </nowiki>
:<nowiki><dd> Melon </dd> </nowiki>
:<nowiki><dd> Banana </dd></nowiki>
:<nowiki><dd> Cherry </dd> </nowiki>
:<nowiki><dd> Blueberry </dd> </nowiki>
:<nowiki><dd> Apricot </dd> </nowiki>
:<nowiki><dd> Pineapple </dd></nowiki>
:<nowiki><dd> Dragon Fruit </dd> </nowiki>
:<nowiki><dd> Avocados </dd></nowiki>
:<nowiki><dd> Kiwi </dd> </nowiki>
:<nowiki><dd> Pear </dd> </nowiki>
:<nowiki><dd> Pomegranate </dd> </nowiki>
:<nowiki><dd> Plum </dd></nowiki>
:<nowiki><dd> Papaya </dd></nowiki>

<nowiki></dl></nowiki>
|| Next to the '''div closing tag''', type the code as shown.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

As I scroll down, the '''background image''' also gets scrolled.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-attachment: fixed;
|| Change the value of '''background-attachment '''to '''fixed.'''

Update the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output as I '''scroll '''down.

The '''background image''' remains fixed, while the other contents are getting scrolled.

This is based on the size of the '''browser''' and the '''content''' available in the page.
|-
|| Switch to Mypage.html

Ctrl + Z

Ctrl + S
|| Switch to the '''Mypage.html''' file.

Undo the changes which we have done now.

Save the file.
|-
|| Slide: Background-Position
|| '''background-position''' is used to specify the position of the '''background image''' of an '''element'''.
|-
|| Slide: Background-Position
|| The position value for the '''background image''' can be set as:

*'''Percentage (%)'''
*'''Length values ( eg. mm, cm, px )'''
*'''keywords (top, right, center, left, bottom)'''

Let us try these.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Type:

background-position: 100% 0%;
|| I will set the position of the '''background image''' to the '''top right''' corner using '''percentage'''.

Inside the '''body tag''', next to the '''background attachment''' property, type the code as shown.
|-
|| [gedit - mystyle.css] Highlight:

background-position: 100% 0%;
|| Here, the first value corresponds to the '''horizontal background''' position.

The second value corresponds to the '''vertical background''' position.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now the position of the '''background image''' has changed to the '''top right corner''' of the page.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-position: 4cm 3cm;
|| Now I will set the position for the '''background image''' using '''length value (cm)'''.

Update the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

The position of the '''background image''' has changed as per the given''' length value'''.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-position: right bottom;
|| Let’s set the position of the '''background image''' to the '''bottom right '''using some '''keywords'''.

Update the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now the position of the '''background image''' has changed to the '''bottom right'''.
|-
|| Slide: Shorthand
|| Using '''shorthand''', we can write this same code in a single line.

The order in which '''background property''' values should be written is:

'''background: ''color'' ''image'' ''repeat'' ''attachment'' ''position'';'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

body {

background: yellow url("tomato.png") no-repeat scroll top right; }
|| Update the code of the '''body''' '''tag '''as shown.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

This is our required page.
|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide: Summary
||In this tutorial, we have learnt about '''background '''properties of an '''element '''in''' CSS.'''
|-
|| Slide: Assignment
|| As an assignment

* Open the file '''styles.css''' which you have created earlier.

|-
|| Slide: Assignment
||
* Set the following '''styles''' for the '''body tag:'''
** '''Image''' as a '''background'''
** '''no-repeat '''for''' background-repeat'''
** '''background-position''' to '''top right'''

|-
|| Slide: Assignment
||
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output

|-
|| Slide:

About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide: Spoken Tutorial Workshops
||The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum
|| Please post your timed queries on this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script for this tutorial is contributed by Neha Solanki

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

@@ Line 149: / Line 149: @@
 |-
 || Only narration
-||We can also set an'''image''' as the'''background''' for an'''element''' using'''CSS.'''
+||We can also set an '''image''' as the '''background''' for an '''element''' using '''CSS.'''
 Let us try this.
@@ Line 350: / Line 350: @@
 The '''background image''' remains fixed, while the other contents are getting scrolled.
-This is based on the size of the '''browser''' and the '''content''' available in the page.
+|-
 |-
 || Switch to Mypage.html
@@ Line 450: / Line 452: @@
 The order in which '''background property''' values should be written is:
-'''background: ''color'' ''image'' ''repeat'' ''attachment'' ''position'';'''
+'''background: ''color image repeat attachment position semicolon'''
 |-
 || [gedit - mystyle.css]
@@ Line 460: / Line 462: @@
 background: yellow url("tomato.png") no-repeat scroll top right; }
-|| Update the code of the '''body''' '''tag '''as shown.
+|| Update the code of the '''body tag '''as shown.
 |-
@@ Line 475: / Line 477: @@
 |-
 || Only narration
-|| With this we have come to the end of this tutorial.
+|| With this we come to the end of this tutorial.
 Let us summarize.
@@ Line 521: / Line 523: @@
 |-
 || Slide: Thanks
-|| The script for this tutorial is contributed by Neha Solanki
+|| The script for this tutorial is contributed by Neha Solanki.
-and this is Madhuri Ganapathi from IIT Bombay.
+And this is Madhuri Ganapathi from IIT Bombay.
 Thank you for watching.
 |-
 |}

CSS/C2/Background-in-CSS/English - Revision history

Nancyvarkey at 09:13, 15 October 2020

Nehasolanki: Created page with "'''Title of the script: '''Background in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."