gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust css examples formatting (#26127)

Browse Source
This commit is contained in:
David Way
2018-12-13 05:03:03 +00:00
committed by Tom
parent 18d5502965
commit 012e93154b
35 changed files with 303 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
guide/english/css/css3-backgrounds/index.md
View File

@@ -12,7 +12,7 @@ The CSS `background` shorthand property is used to define multiple properties li
The `background-color` property specifies the background color of an element.
```css
  background-color : #F00;
background-color : #F00;
```
### Background Image
@@ -22,7 +22,7 @@ The `background-image` property specifies an image to use as background of an el
By default, the image repeats itself to cover the entire surface of the element.
```css
  background-image: url("GitHub-Mark.png");
background-image: url("GitHub-Mark.png");
```
### Background Image - Repetition
@@ -31,25 +31,25 @@ By default, the `background-image` property repeats on the X and Y axis, to cove
If you want to set an axis, like X axis, use `background-repeat` property type:
```css
  background-image: url("GitHub-Mark.png");
background-repeat: repeat-x;
background-image: url("GitHub-Mark.png");
background-repeat: repeat-x;
```
But sometimes you don't want to have your background image cover the whole surface, so you've to specify it by typing:
```css
  background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
```
### Background Image - Position
You can specify the position of the background by typing :
You can specify the position of the background by typing :
```css
  background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
```
It will set your background image at the bottom left of the element.
@@ -59,10 +59,10 @@ It will set your background image at the bottom left of the element.
If you do not want the background image to scroll with the rest of the page, use the `background-attachement` property:
```css
  background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
  background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
```
### Shorthand property
@@ -70,7 +70,7 @@ If you do not want the background image to scroll with the rest of the page, use
You can pass all the properties in one super-property:
```css
  background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
```
When you use this shorthand property, it must be in this order:
@@ -84,7 +84,7 @@ When you use this shorthand property, it must be in this order:
It doesn't matter if one property is missing, so long as the order is maintained:
```css
  background: url("GitHub-Mark.png") no-repeat left bottom;
 background: url("GitHub-Mark.png") no-repeat left bottom;
```
This will work even if the color and the attachment are missing.