Home arrow Style Sheets arrow CSS: Backgrounds
STYLE SHEETS

CSS: Backgrounds


In the last tutorial we discussed the basics and syntax of CSS, where to write the files and how to apply them to our pages. In this brilliant article, we will go over how to apply styles to backgrounds and text. So let's get busy.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
March 03, 2008
TABLE OF CONTENTS:
  1. · CSS: Backgrounds
  2. · How to Set the Background Color
  3. · Working with Background Images
  4. · Positioning the Background Image
  5. · Text in CSS

print this article
SEARCH DEVARTICLES

CSS: Backgrounds
(Page 1 of 5 )

To apply a style to a background, we use one of the various background properties. You can use the background property not only with the page, but other elements as well, such as text and tables. Speaking of tables, here is a nifty one showing you a list of available background properties:


Name of Property

What it Does

Associated Values

background

Sets all background properties in a single declarative statement

background-color

background-image

background-repeat

background-attachment

background-position

background-attachment

Allows you to determine if a background image scrolls with the page or is fixed

scroll

fixed

background-color

Allows you to set the background color of a given element

color-rgb

color-hex

color-name

transparent

background-image

Allows you to set an image for your background

url


background position

Allows you to set the starting position of your background image

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x% y%

xpos ypos

background-repeat

Allows you to set whether or not a background image will repeat, and if so, how it will do so

repeat

no-repeat

repeat-x

repeat-y

Setting Every Background Property with the Background Shortcut

In this example we will use the background property to set all of the background attributes of the body and paragraphs:


<html>

<head>

<style type="text/css">

body

{

background: black url('welcom.gif') no-repeat fixed center;

}

p

{

background: green left}

}


</style>

</head>


<body>

<p>The matrix has you</p>

</body>


</html>

This is the result of the above code:




Every paragraph you type will have the same attributes as the first.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials