CSS/C2/Background-in-CSS/English

From Script | Spoken-Tutorial
Revision as of 14:43, 15 October 2020 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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


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 browser 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 browser 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:

<dl>

<dt> Dry fruits </dt>

<dd> Cashew </dd>
<dd> Almond </dd>
<dd> Apricot</dd>
<dd> Dates </dd>
<dd> Fig </dd>

<dt> Fresh Fruits </dt>

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

</dl>

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 semicolon

[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 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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/Background-in-CSS/English&oldid=54042"