CODEWITHSUNDEEP
htmlcssbackgroundbackground-imageopencart
Alex
Alex

Reputation: 459

how can I make the background as long as the page?

I've encountered a problem with a website I'm changing. The background of the page does not continue like the banners I've put on the sides and the site looks horrible because of this. Could you please help me figure out how to prolong the background of the container as long as the banners( 1500px)? I'm sorry my description of the problem is so vague, I am putting a link here to the website with the problem so you can better see what I mean. It is http://gentlecare.ro/index.php?route=information/information&information_id=6

Thanks a lot, Iris

Upvotes: 0

Views: 1311

Answers (5)

warhead
warhead

Reputation: 446

Since the banners have a fixed height, you could add the same height attribute to your #container id.

#container {
width: 990px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: url(../image/layout/bg-container.jpg) center 0 repeat-y;
height: 1504px;
}

Upvotes: 2

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

<div id="container-inner">
<div id="header">
<div id="column_left">
<div id="column_right"> </div>
<div id="content">
<div style="clear:both"></div>// add this
<div id="footer">
<div style="clear:both"></div>// add this
</div>

and this

 #container {
        background-image: url("../image/layout/bg-container.jpg");
        background-size: 990px 1518px;
    }

#footer {
    background: url("../image/layout/bg-footer.jpg") no-repeat scroll center top transparent;
    bottom: 0;
    height: 60px;
    margin: -130px 0 0;
    padding: 70px 20px 0;
    position: relative;
}

Upvotes: 1

Matanya
Matanya

Reputation: 6346

it seems like you have a CSS syntax error:

    #column_left {
     float:left;
      width:230px;
      clear:; // needs to be "clear:both"
      padding:30px 0 0 10px;
                 }

Upvotes: 2

Samich
Samich

Reputation: 30095

You need to put 

<div style="clear:both"></div>

to the end of your container-inner div to stretch the container to it's content

Or better use CSS Clearfix Best Cross browser solution

Upvotes: 2

Vilmos Ioo
Vilmos Ioo

Reputation: 21

You can use background-size property. Limited to modern browsers thought. You can also just strech the background image.

Upvotes: 2

Related Questions