Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Set a Background Image's Position

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 a Fixed Background Image
• Set the Font Slant
• Set an Element's Margin
• Set the Font Boldness
• Set the Font Style
• CSS background-clip Property
• Set an Element's Display Property
• CSS background-origin Positions Background
• position:relative
• Set Text Justification

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2020 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268