Shape 5

Joomla Templates => City Portal - January - Club => : kenkris November 07, 2009, 02:31:22 PM



: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: kenkris November 07, 2009, 02:31:22 PM
I have modified the template background to a different image of my own.

The problem is the background is designed to be repeating images. That creates problems for me when the site is viewed in different size screeens such 12 inch, 15inch and 17inch screen.

It looks fine on 12 and 15 screen.
But when its viewed in 17inches the image starts repeating itself and  we can  see the whole background image on the left and part of the repeating image on the right.

I would like to have the background image fixed to the center and not repeat itself.
Any suggestions.

Please see the screen shots attached.


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: jonahh November 09, 2009, 01:25:10 PM
You will have to open up your index.php file and look for:

<body style="background: <?php echo $s5_colorback; ?>;">

Then replace it with:

<body style="background: <?php echo $s5_colorback; ?> no-repeat center top;">


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: kenkris November 09, 2009, 06:30:09 PM
Also -
Could you please tell me how to make the Header background image bigger.

I would prefer little bit bigger than the existing size for my site.

regards,
ken


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: kenkris November 09, 2009, 06:54:12 PM
You will have to open up your index.php file and look for:

<body style="background: <?php echo $s5_colorback; ?>;">

Then replace it with:

<body style="background: <?php echo $s5_colorback; ?> no-repeat center top;">

Did that.
I found the index.php file in templates folder.
Then edited using dreamweaver by 'find and replace'.
Then uploaded it to my site.

But still the image is repeating.
Please see the screen shot.

regards,
ken


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: jonahh November 10, 2009, 12:40:44 PM
Can you post a URL of this?


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: kenkris November 10, 2009, 02:05:47 PM
Thank you.

The URL -
http://www.silveroaks-medical-portal.co.uk/

regards,
ken


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: jonahh November 11, 2009, 01:33:50 PM
Ah ok I see, its actually the s5_outerwrap DIV that is setting this background

Add the no-repeat center top to the follow DIV in your index.php file:

#s5_outerwrap


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: kenkris November 11, 2009, 04:39:00 PM
Thank you.

It did the trick.

regards,
ken


: Re: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN
: rfarrell December 08, 2009, 10:22:24 PM

Actually you still have a problem with the background.  If the page is opened in a screen less than 1200px wide the image is truncated on the right when you scroll across.

You might be able to rectify this by replacing

<body style="background: <?php echo $s5_colorback; ?> no-repeat center top;">

with

<body style="background: <?php echo $s5_colorback; ?> no-repeat scroll center top;">