Scribd
Upload
34 views5 pages

Elective 1 Report

The background-position CSS property sets the initial position for background images relative to the background-origin. Positions can be set using length or percentage values to position images a certain distance from the edges of their boxes. CSS gradients allow smooth color transitions between two or more specified colors and can be linear, defined by color stops and a direction, or radial, defined by its center point and color stops. The CSS box model treats each HTML element as a containing box made up of content, padding, border, and margin areas.

Uploaded by

Raiza Ananca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views5 pages

Elective 1 Report

The background-position CSS property sets the initial position for background images relative to the background-origin. Positions can be set using length or percentage values to position images a certain distance from the edges of their boxes. CSS gradients allow smooth color transitions between two or more specified colors and can be linear, defined by color stops and a direction, or radial, defined by its center point and color stops. The CSS box model treats each HTML element as a containing box made up of content, padding, border, and margin areas.

Uploaded by

Raiza Ananca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Background-position

The background-position CSS property sets the initial position for each background image.
The position is relative to the position layer set by background-origin.

<position>
A position defines an x/y coordinate, to place an item relative to the edges of an element's
box.

<length> or <percentage>
This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

Gradient background
CSS gradients let you display smooth transitions between two or more specified colors.
Two types of gradient:
1. Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the colors
you want to render smooth transitions among. You can also set a starting point and a
direction (or an angle) along with the gradient effect.
2. Radial Gradients
A radial gradient is defined by its center.To create a radial gradient you must also define at
least two color stops.
Margins, padding and borders
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.

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
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
https://www.w3schools.com/css/css3_gradients_radial.asp
https://www.w3schools.com/css/css_boxmodel.asp

You might also like