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>
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 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>
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
More CSS Quick Reference: • Set the border-collapse • Set the Text Decoration • Set the Text Alignment • Context selectors • CSS background-origin Positions Background • Set List Bullets Position • How to Use a CSS ID Selector • Use Image for List Item Bullets • Use word-wrap Property to allow Line Breaks in the Middle of Words • Set the Font Properties
|