Background (CSS) - Revision history

Karl Jones: /* External links */

2016-05-03T18:32:10Z

‎External links

Karl Jones: /* Attributes related to background */

2016-05-03T16:51:38Z

‎Attributes related to background

Karl Jones: /* Attributes related to background */

2016-05-03T16:39:58Z

‎Attributes related to background

Karl Jones at 16:37, 3 May 2016

2016-05-03T16:37:06Z

Karl Jones at 11:53, 3 May 2016

2016-05-03T11:53:23Z

Karl Jones at 11:52, 3 May 2016

2016-05-03T11:52:02Z

Karl Jones at 11:45, 3 May 2016

2016-05-03T11:45:27Z

Karl Jones: /* Example */

2016-05-03T11:44:38Z

‎Example

Karl Jones at 11:35, 3 May 2016

2016-05-03T11:35:02Z

Karl Jones: /* External links */

2016-05-03T11:31:30Z

‎External links

@@ Line 168: / Line 168: @@
 * [https://www.w3.org/community/webed/wiki/CSS/Training/background Background] @ w3.org
 [[Category:Web design]]
 [[Category:Web design and development]]

@@ Line 5: / Line 5: @@
 [[File:CSS-Background.png]]
-== Attributes related to background ==
+== CSS properties related to background ==
-CSS attributes related to background:
+[[CSS property|CSS properties]] related to background include:
-*  [[background-color (CSS attribute)]]
+*  [[background-color (CSS property)]]
-*  [[background-image (CSS attribute)]]
+*  [[background-image (CSS property)]]
-*  [[background-repeat (CSS attribute)]]
+*  [[background-repeat (CSS property)]]
 === Examples ===

@@ Line 7: / Line 7: @@
 == Attributes related to background ==
-Attributes related to background:
+CSS attributes related to background:
 === Examples ===

← Older revision		Revision as of 16:37, 3 May 2016
Line 5:		Line 5:
	[[File:CSS-Background.png]]		[[File:CSS-Background.png]]

		+	== Attributes related to background ==
		+
		+	Attributes related to background:
		+
		+	=== Examples ===
		+
		+	<pre>
		+	background-color: #ffffff;
		+	background-image: url(images/logo.png);
		+	background-repeat: no-repeat;
		+	</pre>

	== background-color ==		== background-color ==

@@ Line 73: / Line 73: @@
 </pre>
-[[File:700-Cssed_bgimage.png|700px]]
+[[File:700px-Cssed bgimage.png|700px]]
 '''''By default, the background image is spread like a tile.'''''
@@ Line 141: / Line 141: @@
 </pre>
-[[File:700-Cssed_background.png|700px]]
+[[File:700px-Cssed background.png|700px]]

@@ Line 109: / Line 109: @@
 </pre>
-[[File:700-Cssed_bgrepeat.png|700px]]
+[[File:700px-Cssed bgrepeat.png|700px]]
 See also [http://www.w3.org/TR/CSS2/colors.html#background 14.2 The background].

@@ Line 73: / Line 73: @@
 </pre>
-[[File:Cssed_bgimage.png|700px]]
+[[File:700-Cssed_bgimage.png|700px]]
 '''''By default, the background image is spread like a tile.'''''
 == background-repeat ==
 The 'background-repeat' property specifies whether the image is repeated
@@ Line 108: / Line 109: @@
 </pre>
-[[File:Cssed_bgrepeat.png|700px]]
+[[File:700-Cssed_bgrepeat.png|700px]]
 See also [http://www.w3.org/TR/CSS2/colors.html#background 14.2 The background].
@@ Line 140: / Line 141: @@
 </pre>
-[[File:Cssed_background.png|700px]]
+[[File:700-Cssed_background.png|700px]]

← Older revision		Revision as of 11:44, 3 May 2016
Line 76:		Line 76:

	'''''By default, the background image is spread like a tile.'''''		'''''By default, the background image is spread like a tile.'''''
−

	== background-repeat ==		== background-repeat ==

← Older revision		Revision as of 11:35, 3 May 2016
Line 4:		Line 4:

	[[File:CSS-Background.png]]		[[File:CSS-Background.png]]
		+
		+
		+	== background-color ==
		+
		+	The 'background-color' property sets the background color of an element.
		+
		+	[Syntax]
		+	<pre>
		+	background-color: <color>
		+	</pre>
		+
		+	* color: Specifies a color value:<br />
		+	** [http://www.w3.org/TR/css3-color/#html4 color keywords]
		+	** [http://www.w3.org/TR/css3-color/#numerical color values]
		+
		+
		+	=== Example ===
		+
		+	[style.css]
		+	<pre>
		+	body{
		+	background-color: red;
		+	}
		+	</pre>
		+
		+	[index.html]
		+	<pre>
		+	<body>
		+	<p>This is a paragraph</p>
		+	</body>
		+	</pre>
		+
		+	[[File:Cssed_back_color.png]]
		+
		+	== background-image ==
		+
		+	The 'background-image' property sets the background image of an element.
		+
		+	[Syntax]
		+	<pre>
		+	background-image: <uri> \| none
		+	</pre>
		+
		+	* uri
		+	The functional notation used to designate URIs in property values is "url()":
		+	<pre>
		+	background-image: url(images/image.png);
		+	</pre>
		+
		+	'''''Note: You should also specify a background color that will be used when the image is unavailable. The background color sets the color that looks like the set background image.'''''
		+
		+
		+	=== Example ===
		+	* Sets the W3C logo to the background image.
		+
		+	[style.css]
		+	<pre>
		+	body{
		+	background-image: url(images/logo.png);
		+	}
		+	</pre>
		+
		+	[index.html]
		+	<pre>
		+	<body>
		+	<p>This is a paragraph</p>
		+	</body>
		+	</pre>
		+
		+	[[File:Cssed_bgimage.png\|700px]]
		+
		+	'''''By default, the background image is spread like a tile.'''''
		+
		+
		+	== background-repeat ==
		+	The 'background-repeat' property specifies whether the image is repeated
		+
		+	[Syntax]
		+	<pre>
		+	background-repeat: repeat \| repeat-x \| repeat-y \| no-repeat
		+	</pre>
		+
		+	* repeat: The image is repeated both horizontally and vertically.
		+	* repeat-x: The image is repeated horizontally only.
		+	* repeat-y: The image is repeated vertically only.
		+	* no-repeat: The image is not repeated: only one copy of the image is drawn.
		+
		+
		+	=== Example ===
		+
		+	[style.css]
		+	<pre>
		+	body{
		+	background-image: url(images/logo.png);
		+	background-repeat: repeat-x;
		+	}
		+	</pre>
		+
		+	[index.html]
		+	<pre>
		+	<body>
		+	<p>This is a paragraph</p>
		+	</body>
		+	</pre>
		+
		+	[[File:Cssed_bgrepeat.png\|700px]]
		+
		+	See also [http://www.w3.org/TR/CSS2/colors.html#background 14.2 The background].
		+
		+
		+	== Challenge ==
		+	1. Specifies the image for the background.
		+
		+	[style.css]
		+	<pre>
		+	body{
		+	color: #333333;
		+	font-size: 0.9em;
		+	font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
		+	background-image: url(images/bg.gif);
		+	background-repeat: repeat;
		+	}
		+	</pre>
		+
		+	2. Sets the color ''and'' the image of the background in the main contents area.
		+
		+	[style.css]
		+	<pre>
		+	#wrapper{
		+	width: 900px;
		+	margin: 0px auto;
		+	background-color: #ffffff;
		+	background-image: url(images/logo.png);
		+	background-repeat: no-repeat;
		+	}
		+	</pre>
		+
		+	[[File:Cssed_background.png\|700px]]
		+

	== See also ==		== See also ==