Joomla site - How to stop Wrapper image resizing itself?

the_god_swan

Hi All,

I'm building a joomla powered site for a friend at the moment, a band website. And I have being removing the images supplied with the template, eg. header, footer etc.

The site in question is : www.monorail.ie

2 new images I have added and want to keep are:
- #page_bg (this is the wood panel)
- div#wrapper (this is the black and white old photo)

So my issue is I would like to keep the full black/white image displayed at all times, but when I remove unnecessary joomla menus from the left panel my image gets cut in half. Now I know this is css tidying up the page, but my css experience is pretty crap to be honest. And Id very much appreciate some help with this.

What area of the css code should I be looking at? Or am I even looking in the correct place ( template.css )?

I didn't want to copy/paste all the code here just yet, its big!

worc

Could you remove the menus so we could have a little look at the site when the image gets cut in half? Not just 100% on exactly the problem and if we could have a look-see it might be easier to figure out what's going wrong.

the_god_swan

worc wrote: »

Could you remove the menus so we could have a little look at the site when the image gets cut in half? Not just 100% on exactly the problem and if we could have a look-see it might be easier to figure out what's going wrong.

Okay so if you have a look now, I have removed/disabled the joomla menus 'resources' and 'key concepts'. Now my black/white image (wrapper - is this the correct item name?) has been cut in half.

If you click on the menu link 'background', you can compare the wrapper image in fuller form. But even this image has been cut at the bottom a bit.

What I want; is to stop the css code altering my wrapper image size each time I add/remove menus, articles and general content really.

worc

This might work...go to template.css, on line 106 it looks like this:

#content {margin:0 auto; overflow:hidden; padding:0 42px 14px 14px; width:900px;}

Try adding in height by changing it to this:

#content {height:900px; margin:0 auto; overflow:hidden; padding:0 42px 14px 14px; width:900px;}

The 900px is purely for some value to be there, you can change that to suit.

If you're not sure about finding the lines in css code, download Notepad++, it will number each line of code when you open the css file.

the_god_swan

Success

Thanks a million worc, I really appreciate the help. Thats your good deed done for the day