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 DIV

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

<div class="mydiv">
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
</div>

Place a Backgound Image at a Specific Location in a DIV

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">
.mydiv2
{
width:400px;
background-image: url('imagename.jpg');
background-repeat: no-repeat;
background-position:  10px 10px;
border-style: solid;
border-width: 1px;
height: 110px;
}
</style>

<div class="mydiv2">
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
</div>

More CSS Quick Reference:
• CSS background-origin Positions Background
• Indent the First Line of Text
• Use an Embedded Style Sheet
• position:relative
• Context selectors
• Set the Type of Bullet Used in List
• Set List Bullets Position
• CSS Units of Measurement
• Style the First Line
• Use word-wrap Property to allow Line Breaks in the Middle of Words

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues