centering backround image

Forum Home

FAQ

Search

Memberlist

Register

Profile

Log in to check your private messages

Register - Not registered yet? Got something to say? Join HTML Code Tutorial!

centering backround image

HTML Help Forum Index -> CSS

View previous topic :: View next topic

Author

Message

Wag

Joined: 04 Mar 2008
Posts: 4

Posted: Tue Mar 04, 2008 12:14 pm centering backround image

Reply with quote

I'm using this and my image does not center - any ideas?

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

sticks464

Joined: 31 Dec 2006
Posts: 1164

Posted: Tue Mar 04, 2008 12:20 pm

Reply with quote

Here's the easy way

Code:

body {
background-image: url('myimage.jpg') no-repeat center center;
}

You can add fixed in after no-repeat except IE doesn't recognize that attribute.

Or if you want the image to not scroll
css

Code:

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}

html

Code:

<body>
<div>
<img id="background" src="myImage.jpg" alt="" title="" />
</div>
<div id="scroller">
<div id="content">
<p>Proin scelerisque justo quis ante. Maecenas vehicula orci quis arcu. Nam dictum lectus quis ipsum. In felis. Cras eu lectus. Nam sed est ut orci venenatis faucibus.</p>
<p>Proin scelerisque justo quis ante. Maecenas vehicula orci quis arcu. Nam dictum lectus quis ipsum. In felis. Cras eu lectus. Nam sed est ut orci venenatis faucibus.</p>
</div>
</div>
</body>

The image should be at least 1280X1040 to fill the screen.

Corey Bryant
Site Admin

Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA

Posted: Tue Mar 04, 2008 1:13 pm

Reply with quote

Shorthand is better but the code you gave

Code:

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

you left off a semi-colon after the word (fixed)

Code:

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

_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Expression Web Blog

Wag

Joined: 04 Mar 2008
Posts: 4

Posted: Tue Mar 04, 2008 2:54 pm re

Reply with quote

Thanks guys!

Display posts from previous:

	HTML Help Forum Index -> CSS	All times are GMT - 8 Hours
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group

HTML Help topic RSS feed

HOSTING / DESIGN

$1.99 Domain Registration
Cheap Web Hosting
Website Templates

MAKE MONEY

Sell Domain Names
Sell Website Templates

| | | | |