...

View Full Version : background image and text not minimizing



D13G0
10-19-2010, 05:00 PM
Hey guys

I'm new to this stuff. I'm trying to get my background (770x481) to be centered on my page. I've done things like background-position: center center; but it doesn't center it, half of the image isn't showing.

I can do it using % but when I minimize my browser..I don't get a scroll bar. Also, the text doesn't move, so it's no consistent.

All I want is a background image that's centered and with my content to stay consistent with the browser.

SB65
10-19-2010, 05:35 PM
Got a link to your page?

D13G0
10-19-2010, 05:45 PM
Don't have one because it's not even up lol I just started making it and I've looked everywhere and tried everything. Can't get it to work.

SB65
10-19-2010, 06:10 PM
Can you post your whole html and css then?

D13G0
10-19-2010, 06:52 PM
I got it centered, but when i minimize the window, the whole page gets smaller with the text staying the same lol (image moves to a different position but the text doesn't move)

I noticed that when I take out the background-position: center center; everything is fine, but my image isnt centered and is on the top left lol. O my.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="background.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="background.css" rel="stylesheet" type="text/css">

</head>



<body>
</body>
</html>





CSS




body {
background-color: #000;
background-image: url(images/index_background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

SB65
10-20-2010, 08:58 AM
Because you've got the background-image set on the body element, it's going to do exactly what you describe. The bakcground image is centred on the page regardless of how wide the page is, and the text is always to the top left.

I'm guessing you really want the background image to be on a block of text, in which case you might want something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#wrapper {
background-color: #000;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
width:770px;/*set the div to have a width*/
height:481px;/*and a height if you want*/
margin:0 auto/*centre the div on the page*/
}
</style>
</head>



<body>
<div id="wrapper">Some text</div>
</body>
</html>

Then when you resize the page, the div, its text and its background move together.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum