Home arrow Style Sheets arrow Page 3 - 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 / 1
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

TOOLS YOU CAN USE

advertisement
CSS: Backgrounds - Working with Background Images
(Page 3 of 5 )

There are a lot of issues to consider when you work with images, such as image size, position, does it scroll or stay in one spot, and so forth. But first let's insert a basic image in a paragraph:

<html>

<head>

<style type="text/css">

body

{

background-image:

url('2.png')

}

</style>

</head>

<body>

</body>

</html>

This will take the file 2.png and set it as the background of your body. If your image is the wrong size, you will notice that your browser tiles the image over and over again. To stop this, you can use the background-repeat property.

Repeating and Not Repeating the Background

To make sure the background does not tile, use the background-repeat:no-repeat property, like so:


<html>

<head>

<style type="text/css">

body

{

background-image:

url('2.png'); background-repeat:no-repeat

}

</style>

</head>

<body>

</body>

</html>

Or if you wanted it to repeat, you could do this:


<html>

<head>

<style type="text/css">

body

{

background-image:

url('2.png'); background-repeat:repeat

}

</style>

</head>

<body>

</body>

</html>

You can also make the background repeat horizontally or vertically using either the repeat-x (horizontal) or the repeat-y (vertical) values.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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