| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Attach a Fallback value to a CSS Variable | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Attach a Fallback value to a CSS Variable
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-21 06:56:40 +04:00
										 |  |  | <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  --> | 
					
						
							|  |  |  | We need to add a fallback value of ```black``` to the ```background``` property of the ```.penguin-top``` and ```.penguin-bottom``` classes. | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-21 06:56:40 +04:00
										 |  |  | ## Solution
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-21 06:56:40 +04:00
										 |  |  | Add a fallback value of ```black``` to the ```background``` property of the ```.penguin-bottom``` class: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  |   .penguin-bottom { | 
					
						
							|  |  |  |     top: 40%; | 
					
						
							|  |  |  |     left: 23.5%;   | 
					
						
							|  |  |  |     /* change code below */ | 
					
						
							|  |  |  |     background: var(--pengiun-skin,black); | 
					
						
							|  |  |  |     /* change code above */  | 
					
						
							|  |  |  |     width: 53%; | 
					
						
							|  |  |  |     height: 45%; | 
					
						
							|  |  |  |     border-radius: 70% 70% 100% 100%; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Add a fallback value of ```black``` to the ```background``` property of the ```.penguin-top``` class: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  |   .penguin-top { | 
					
						
							|  |  |  |     top: 10%; | 
					
						
							|  |  |  |     left: 25%; | 
					
						
							|  |  |  |     /* change code below */ | 
					
						
							|  |  |  |     background: var(--pengiun-skin,black); | 
					
						
							|  |  |  |     /* change code above */   | 
					
						
							|  |  |  |     width: 50%; | 
					
						
							|  |  |  |     height: 45%; | 
					
						
							|  |  |  |     border-radius: 70% 70% 60% 60%; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | ``` |