Question

I’m learning CSS at the moment and I am using it on a website to control the layout of the site.

I Have a number of containers, 5 of them, all on top of each other, I have a background for the page but I also want to use a background for one of the containers. So I used the 'background-image:url("");' tag to use a background, the I also used the attachment, repeat. The problem I was the image wasn’t setting itself to the container, it was pushing out way past the dimensions that I had set in my CSS code which were height:312px; and width: 1000px;

Here is the CSS

html, body 
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
 }

.hidden 
{
display: none;
}

#page-container 
{
width: 1000px;
margin: auto;
background: transparent;
}

#header 
{
height: 130px;
}

#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
 }

Here is the HTML:

<div id="page-container">

    <div id="header">
        <div id="flashContent">

        </div>
    </div>

    <div id="content-top"><!--<img src="images/pic.png">--></div>

    <div id="portfolio-container">

        <div id="portfolio1"><p>1</p></div>

        <div id="portfolio2">2</div>

        <div id="portfolio3">3</div>

        <div id="portfolio1"><p>4/p></div>

        <div id="portfolio2">5</div>

        <div id="portfolio3">5</div>

    </div>

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

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

</div>

I haven’t pasted all of the CSS but its needed let me know.

Its as if the background is filling a space that is a lot bigger than the space specified.

Answer 1

Last time I needed to do something like this, I did the following:

#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }

And then on my page I included the following:

<img id="background" src="whatever.jpg" alt="" title="" /> 

And that was it. This actually works quite nicely, with the background image magically resizing itself until one of the dimensions (width or height) reaches the maximum specified.

It doesn’t need CSS3 support. Try it and see.

Obviously tweak the positioning stuff if you don’t want it to fill the screen (I did).