Forum Support

Shape 5
March 29, 2024, 09:30:55 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: Background Image Scaling Problem  (Read 511 times)
decber
Jr. Member
**
Offline Offline

Posts: 8



« on: August 18, 2014, 09:26:22 PM »

Ive got a background image in the Top Row 1, Area 1. When viewed on a 13 or 15 inch monitor the picture fits well, with the buttons aligned. Ive got the background image size  option as 100% auto. When the image is viewed on a larger resolution, the image stretches across the screen making the buttons look out of line. How do I get this image to scale the same way, regardless of resolution?
Link - www.pearltutoring.com.au
Thankyou.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: August 19, 2014, 07:22:30 AM »

Hello,

That is because the height is too small. 100% auto means it's 100% of the width and the height is automatically calculated. If your content becomes longer than the aspect ratio of the picture this will happen. You can either increase the percentage or use "cover" instead.
Logged

Mike Knott
------------
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
decber
Jr. Member
**
Offline Offline

Posts: 8



« Reply #2 on: August 20, 2014, 01:04:50 AM »

I still dont understand. I've changed the background to cover but the buttons are still not aligned, in relation to the text. I've attached two images, one 13inch and one 24 inch. I need the buttons in the same spot, underneath the writing regardless of the screen size.

thanks
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: August 20, 2014, 02:36:52 AM »

Hello,

This is because your buttons are published to the top_row1 which is contained by the body width. For example you can see the buttons will always be in line with the left edge of your Home Menu button since the menu is also contained in the body.

So as your page gets smaller so does the padding on the right and left of the body therefor changing the position of the buttons in relation.
Logged

Mike Nicoll
------------
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
decber
Jr. Member
**
Offline Offline

Posts: 8



« Reply #4 on: August 20, 2014, 09:57:17 PM »

Oh I see. Could you offer any alternatives to what I'm trying to achieve?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: August 20, 2014, 10:13:26 PM »

Hello,

The background image you are using is not a good idea for responsive because getting her head to scale properly in the container on multiple screens correctly is going to prove difficult. Generally the backgrounds for these areas are meant for patterns, colors or elements that do not rely on perfect scaling. As Mikek said the best bet is probably to use "cover" if you wanted to keep that image as is.

You definitely don't want the text as part of your background image. You would want to set up some containers for those so you can easily move them around. When you have buttons that are overlaid, an image with text and a portrait of a lady it is going to be nearly impossible to scale properly.

I would remove the text from the image and add it as a module position in the top row along with the buttons you added. Then maybe text-align them both to the center so they are always in the middle.



« Last Edit: August 20, 2014, 10:15:21 PM by mikenicoll » Logged

Mike Nicoll
------------
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
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.