Scribd
Upload
20 views

Lecture 3

The document discusses CSS properties for background images, borders, boxes and positioning. It defines properties like background-image, background-repeat, border-style and explains concepts such as the box model. Examples are provided to demonstrate each property and concept.

Uploaded by

Ssip Consultation
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

Lecture 3

The document discusses CSS properties for background images, borders, boxes and positioning. It defines properties like background-image, background-repeat, border-style and explains concepts such as the box model. Examples are provided to demonstrate each property and concept.

Uploaded by

Ssip Consultation
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

CSS 

Background Image

CSS background-image
The background-image property specifies an image to use as the background of an
element.

By default, the image is repeated so it covers the entire element.

body {
  background-image: url("paper.gif");
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

CSS Background Repeat
CSS background-repeat
By default, the background-image property repeats an image both horizontally and
vertically.

Some images should be repeated only horizontally or vertically, or they will look
strange, like this:

Example
body {
  background-image: url("gradient_bg.png");
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

If the image above is repeated only horizontally (background-repeat: repeat-x;),


the background will look better:

Example
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

CSS background-repeat: no-repeat


Showing the background image only once is also specified by the background-
repeat property:

Example
Show the background image only once:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

}
</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background image example.</p>

<p>The background image is only showing once, but it is disturbing the reader!
</p>

</body>

</html>

CSS background-position
The background-position property is used to specify the position of the
background image.

Example
Position the background image in the top-right corner: 

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
<!DOCTYPE html>

<html>

<head>

<style>
body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background no-repeat, set position example.</p>

<p>Now the background image is only shown once, and positioned away from the text.</p>

<p>In this example we have also added a margin on the right side, so the background image will never
disturb the text.</p>

</body>

</html>

CSS Background Attachment
CSS background-attachment
The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page):

Example
Specify that the background image should be fixed:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background


image should scroll or be fixed (will not scroll with the rest of the
page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize


the browser window.</p>

Example
Specify that the background image should scroll with the rest of the page:
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: scroll;

</style>

</head>

<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should scroll or be
fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
CSS Background Shorthand

CSS background - Shorthand property


To shorten the code, it is also possible to specify all the background properties
in one single property. This is called a shorthand property.

Instead of writing:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

You can use the shorthand property background:

Example
Use the shorthand property to set the background properties in one declaration:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the


background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also


positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write
over the background image.</p>

</body>
</html>

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
CSS Borders

CSS Border Style


The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border


 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-
color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-color
value
 outset - Defines a 3D outset border. The effect depends on the border-
color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).

Example
Demonstration of the different border styles:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>


<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>


<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

A dotted border.

A dashed border.

A solid border.
A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.
CSS Box Model

All HTML elements can be considered as boxes.

The CSS Box Model


In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image
below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space
between elements. 

Example
Demonstration of the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

<!DOCTYPE html>

<html>
<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Width and Height of an Element


In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.

Important: When you set the width and height properties of an element with
CSS, you just set the width and height of the content area. To calculate the
full size of an element, you must also add padding, borders and margins.

Example
This <div> element will have a total width of 350px: 

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

}
</style>

</head>

<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">

<div>The picture above is 350px wide. The total width of this element is also
350px.</div>

</body>

</html>

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Image Gallery
The following image gallery is created with CSS:

Example
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque
Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern
Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"
>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

You might also like