Forum Support

Shape 5
March 29, 2024, 03:47:36 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: HOW TO MAKE BACKGROUND IMAGE FIXED TO THE CENTER OF THE SCREEN  (Read 753 times)
kenkris
Jr. Member
**
Offline Offline

Posts: 26



« on: 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.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: 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;">
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kenkris
Jr. Member
**
Offline Offline

Posts: 26



« Reply #2 on: 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
Logged
kenkris
Jr. Member
**
Offline Offline

Posts: 26



« Reply #3 on: 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
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #4 on: November 10, 2009, 12:40:44 PM »

Can you post a URL of this?
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kenkris
Jr. Member
**
Offline Offline

Posts: 26



« Reply #5 on: November 10, 2009, 02:05:47 PM »

Thank you.

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

regards,
ken
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #6 on: 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
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kenkris
Jr. Member
**
Offline Offline

Posts: 26



« Reply #7 on: November 11, 2009, 04:39:00 PM »

Thank you.

It did the trick.

regards,
ken
Logged
rfarrell
Jr. Member
**
Offline Offline

Posts: 156



« Reply #8 on: 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;">
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.