[SOLVED] background image height

[isaac_cm]

Hello,

I use in my design a background image for the left panel on the site , the problem is some pages in my design is taller than other , how I can be sure that the background image will always fill the left panel no matter the height

 

thanks

[moberemk]

You can't, not until CSS3. You could absolute-position your content above an image with a 100% height value, but that would probably look ugly.

[isaac_cm]

ok, but is there a way to align background correctly behind my nav buttons on the left in resolution 800x600 the nav bar is on the left of the screen but in resolution 1024x768 the nav bar centered along with the content box but the background is not

 

I used the following css:

 

body {

background-image: url(../images/page_bottom.jpg);

background-position: left;

background-repeat: repeat-y;

}

 

also attached an image of the problem

 

[attachment deleted by admin]

[isaac_cm]

for reference only there is a way to make the background running to the screen bottom it is like using cheat codes in games

 

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

 

#navigation

{

background: blue;

width: 150px

}

 

Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

 

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

 

body

{

background: url(blue-image.gif) 0 0 repeat-y

}

 

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.

 

Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

by Trenton Moss

[moberemk]

You make the background the background of a container div for the navigation.

[isaac_cm]

is there another way, because my current design contains padding and margins no room to add another div with new width , I have to redesign width of every thing in my design to add this

 

I hope there is a way to do it as a body background

 

thanks

[moberemk]

Then you would have to center the image after adding transparent or white pixels for behind the content. Basically, make an image the width of your entire content area, sidebar included, then include the sidebar background on the left-hand side.

[isaac_cm]

did not catch you, please explain

[dbrimlow]

What you are asking for is an advanced css technique that requires some understanding of how the background of an block/box works.

 

Moberemk gave you an advanced solution. But he can't just give it to you, without you understanding what it is he proposed.

 

But he (we) is guessing as to what it is you are actually asking. Can you show a sample?

 

You already showed a solution. Use repeats.

 

Try to "tile" the image without limitation:

 

background-repeat: repeat;

 

The above will repeat it both width and height for the full size of the column (whatever size it is).

 

 

[isaac_cm]

ok, I will try it

[isaac_cm]

brilliant idea!! thanks moberemk for great help I have of course to center position