Bucaro TecHelp Web Design : Cascading Style Sheets Quick Reference : Set a Background Image's Position

Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH] [User Agreement] [Privacy Policy] [Site Map] [Contact Form] [Advertise on BTH] [News Feed]

Web

This Site

Your Ad Here

Set a Background Image's Position

By Stephen Bucaro

Set a background image's Position in an html element using the background-image property to specify the image, the background-repeat property with the no-repeat value, and the background-position property to specify the position of the image.

Center a Backgound Image on a Webpage

<style type="text/css">
body
{ 
background-image: url('imagename.jpg');
background-repeat: no-repeat;
background-position: center; 
}
</style>

Place a Backgound Image in Top Left of a Webpage

<style type="text/css">
body
{ 
background-image: url('imagename.jpg');
background-repeat: no-repeat;
background-position: top left; 
}
</style>

Center a Backgound Image in a Span

<style type="text/css">
.myspan
{ 
background-image: url('imagename.jpg');
background-repeat: no-repeat;
background-position: center;
border-style: solid;
border-width: 1px;
height: 110px;  
}
</style>

<span class="myspan">
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com
</span>

Download Free Ebooks at bucarotechelp.com
Download Free Ebooks at bucarotechelp.com
Download Free Ebooks at bucarotechelp.com
Download Free Ebooks at bucarotechelp.com
Download Free Ebooks at bucarotechelp.com
Download Free Ebooks at bucarotechelp.com

Place a Backgound Image at a Specific Location in a Span

Place a background image at a specific location in a span with the background-position property, specifying an x (horizontal) offset and a y (vertical) offset.

<style type="text/css">
.myspan
{ 
background-image: url('imagename.jpg');
background-repeat: no-repeat;
background-position:  10px 10px;
border-style: solid;
border-width: 1px;
height: 110px;  
}
</style>

<span class="myspan">
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com<br />
Download Free Ebooks at bucarotechelp.com
</span>

Web Design Sections

General Web Design

HTML

Graphics Design

CSS Quick Reference

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

CSS Quick Reference

CSS Properties Index
Use Inline Style
Use an Embedded Style Sheet
Use an External Style Sheet
CSS Units of Measurement
Specifying Color
Set the Text Color
Set the Text Alignment
Set the Letter Spacing
Set the Word Spacing
Set the Line Spacing
Highlight Text
Indent the First Line of Text
Set the Text Decoration
Set Text Justification
Set the Text Case
Set the Font Family
Set the Font Style
Set the Font Boldness
Set the Font Size
Set the Font Variant
Style the First Letter
Style the First Line
Set the Background Color
Set a Background Image
Set a Background Image's Position
Set a Fixed Background Image
Set the Background Properties
Set the Border Properties
Set the Border Style
Set the Border Width
Set the Border Color
Set the Type of Bullet Used in List
Use Image for List Item Bullets
Set List Bullets Position
Set List Properties
HTML, XHTML, and CSS Bible
Web Designer's Reference
Set an Element's Clipping
Set an Element's Display Property
Set an Element's Float
Set an Element's Margin
Set an Element's Overflow
Set an Element's Overlap
Set an Element's Padding
Set an Element's Position
Color the Scrollbar
Set an Element's Visibility
Vertical Align an Element
Define CSS Rollover Effects

Amazon.com Widgets