Table of content
|Read No. | Name of chapter| |:———: |:————–:| |11|Images| |11|Practical Information |11|Video and Audio|
# CSS-Images
Controlling sizes of images in CSS
You can control the size of an image using the width and height properties in CSS, just like you can for any other box.
Centering images Using Css
By default, images are inline elements. This means that they flow within the surrounding text. In order to center an image, it should be turned into a blocklevel element using the display property with a value of block. Once it has been made into a block-level element, there are two common ways in which you can horizontally center an image:
-
On the containing element, you can use the text-align property with a value of center.
-
On the image itself, you can use the use the margin property and set the values of the left and right margins to auto.
Background Images (backgroung-image)
The background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box
Repeating Images (background-repeat, background-attachment)
The background-repeat property can have four values:
-
repeat: The background image is repeated both horizontally and vertically (the default way itis shown if the backgroundrepeat property isn’t used).
-
repeat-x: The image is repeated horizontally only (as shown in the first example on the left).
-
repeat-y: The image is repeated vertically only.
-
no-repeat: The image is only shown once.
The background-attachment property specifies whether a background image should stay in one position or move as the user scrolls up and down the page. It can have one of two values:
-
fixed The background image stays in the same position on the page.
-
scroll The background image moves up and down as the user scrolls up and down the page.
Background Position (background-position)
When an image is not being repeated, you can use the background-position property to specify where in the browser window the background image should be placed. This property usually has a pair of values. The first represents the horizontal position and the second represents the vertical.
-
left top
-
left center
-
left bottom
-
center top
-
center center
-
center bottom
-
right top
-
right center
-
right bottom
Practical Information
On-Page SEO
In every page of your website there are seven key places where keywords (the words people might search on to find your site) can appear in order to improve its findability.
1- Page Title
2- URL / Web Address
3- Headings
4- Text
5- Link Text
6- Image Alt Text
7- Page Descriptions
Analytics: Learning about your Visitors
As soon as people start coming to your site, you can start analyzing how they found it, what they were looking at and at what point they are leaving. One of the best tools for doing this is a free service offered by Google called Google Analytics.
How Many People Are Coming to Your Site?
The overview page gives you a snapshot of the key information you are likely to want to know. In particular, it tells you how many people are coming to your site.
What Are Your Visitors Looking At?
The content link on the left-hand side allows you to learn more about what the visitors are looking at when they come to your site.
Where Are Your Visitors Coming From?
The traffic sources link on the left hand side allows you to learn where your visitors are coming from.
Video and Audio
HTML5 video and audio
The < video > and < audio > elements allow us to embed video and audio into web pages.
You can review what all the HTML features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls. If you don’t specify this, you get no playback controls:
