CODEWITHSUNDEEP
htmlcsslayout
ragebunny
ragebunny

Reputation: 1760

CSS backgrounds

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.

Upvotes: 0

Views: 108

Answers (3)

Tom Chantler
Tom Chantler

Reputation: 14931

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).

Upvotes: 1

user920041
user920041

Reputation:

Try float:left in #contentTop

Hope that helps!

In css you also have background-size:contain/cover

Upvotes: 0

Martin Risell Lilja
Martin Risell Lilja

Reputation: 652

You will have to set background-size to 100%

It only works in browsers supporting CSS3

Upvotes: 0

Related Questions