Home arrow Style Sheets arrow Page 4 - 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 - Positioning the Background Image
(Page 4 of 5 )

You can position the background image using the background-position property, like this:


<html>

<head>

<style type="text/css">

body

{

background-image:

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

}

</style>

</head>

<body>

</body>

</html>

The values at which you can set the position are: top left, top center, top right, center left, center right, center center, bottom left, bottom center, and bottom right.

You can also position the image using the x% and y%, in this manner:


<html>

<head>

<style type="text/css">

body

{

background-image:

url('2.png'); background-repeat:no-repeat;background-position:30% 20%

}

</style>

</head>

<body>

</body>

</html>

This works by setting the first value (%x) as the horizontal position, and the second value (%y) as the vertical position.

You can also set the image position using pixels by relying on the xpos, ypos value:

<html>

<head>


 

<style type="text/css">

body

{

background-image:

url('2.png'); background-repeat:no-repeat;background-position:70px 120px;

}

</style>

</head>

<body>

</body>

</html>

Again, the xpos represents horizontal and ypos represents vertical.


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 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials