6 Replies - 1098 Views - Last Post: 14 April 2011 - 10:28 AM

#1 BrockShelt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-April 11

Background Image Problem

Posted 14 April 2011 - 05:08 AM

I'm trying to get my background to fit across the whole page, but it only stays in the center. I don't have much experience in html or css.

Here is the website: http://uberchat.net/uberchat2/

Here is the html:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Uber Chat - Free Chat Room </title>
</head>
<body>

<div id="container">

<div id="header">
<center><img src="images/logo.gif" alt="Uber Chat"/></center>
</div>

<div id="nav"></div>

<div id="content"></div>

<div id="footer"></div>
</div>
</body>

</html>



Here is the css:

#containter {
width: 1200px;
}

#header {
width: 900px;
height: 300px;
}

#nav {}

#content{}

#footer{}

body {
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
width: 1200px;
height: 1200px;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Background Image Problem

#2 Creecher   User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: Background Image Problem

Posted 14 April 2011 - 05:30 AM

I think what you may be looking for is here:

body {
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}




Just set the background-size to 100% and it will stretch all over the page :)
Was This Post Helpful? 0
  • +
  • -

#3 BrockShelt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-April 11

Re: Background Image Problem

Posted 14 April 2011 - 06:45 AM

View PostNeverPool, on 14 April 2011 - 05:30 AM, said:

I think what you may be looking for is here:

body {
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}




Just set the background-size to 100% and it will stretch all over the page :)


Sorry, that didn't work :( . http://www.uberchat.net/uberchat2
Was This Post Helpful? 0
  • +
  • -

#4 Creecher   User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: Background Image Problem

Posted 14 April 2011 - 08:55 AM

View PostBrockShelt, on 14 April 2011 - 08:45 AM, said:

View PostNeverPool, on 14 April 2011 - 05:30 AM, said:

I think what you may be looking for is here:

body {
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}




Just set the background-size to 100% and it will stretch all over the page :)


Sorry, that didn't work :( . http://www.uberchat.net/uberchat2

That did exactly what you wanted it to...
Was This Post Helpful? 0
  • +
  • -

#5 BrockShelt   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 14-April 11

Re: Background Image Problem

Posted 14 April 2011 - 09:29 AM

Are you sure, I still see white spaces on the sides.
Was This Post Helpful? 0
  • +
  • -

#6 Creecher   User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: Background Image Problem

Posted 14 April 2011 - 09:46 AM

Yeah it shows up fine on my screen. It's set to 100% so it should cover the entire page.
Was This Post Helpful? 0
  • +
  • -

#7 D.Mulroy   User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Background Image Problem

Posted 14 April 2011 - 10:28 AM

It will only every be 900px wide since it is located inside the header div. The container stretches to 1200px leaving 150px of potential white space on either side.

edit - Thought we were talking about the header logo :X on a school computer so DIC shows up kind of weird and I missed neverpool's post. The only other problem I could think of is if the actual image isn't wide enough.

This post has been edited by D.Mulroy: 14 April 2011 - 10:31 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1