• 0
Sign in to follow this  
Followers 0

Challenge with Feature Background Image scaling

Question

Posted · Report post

I am trying to use an image as a Feature Background Image. However, no matter what scale I upload the image, the Framework seems to be scaling it up so part of the image is cutoff. I am using an image at 960x330 which can be seen on the 5th tab here: http://www.aptinternational.org.php5-20.dfw1-2.websitetestlink.com/ You can see that a portion of the "i" is cutoff. How do I make the background image fit into the displayed area? Thanks! Sterling

Share this post


Link to post
Share on other sites

28 answers to this question

  • 0

Posted · Report post

Sterling, as I'm seeing it, the image itself is 900px by 300px. You need a graphics editor to resize the image to 960px by 330px and should have it in the feature images background. At present, it appears to be in the feature image field.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please look at tab 5 and not tab 1

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Why does it increase the size such that the full image is not viewable on the screen?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm not sure, but probably because of CSS. Do you mind using some kind of CSS tweak to move the image down?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am not opposed to using a css tweak. Before I do that I would like to understand the default Pagelines operation. What is it doing to images I set as the background image in a feature? Why does it expand the image so it is no longer fully viewable? What rules is it using to expand, height, width?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I checked the CSS for the image in your fifth slide but there is none that is resizing the image to be larger and the image isn't being enlarged after upload either. I'm not sure what could be causing this. Have you tried uploading an image that is smaller than 960px-wide in a different slide to see if the problem persists?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I just added a new 6th slide with an image that was 900px wide and it is doing the same thing. It seems to only occur when the image is a background image. What are the rules that cause the background image to scale on features?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm sending you a Private Message via the Inbox at the top of this page.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Is this issue now resolved ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry no it is not resolved. I have adjusted which two features it is now 4 and 5. But I still have the issue. I tried the recommended size to 960 x330 and it still does the same thing with the background image.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm including this issue in a report to send since it's re-occurring. I'm not certain what could be causing this! :

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is there someplace where it lists the default ideal picture size for the different feature styles (background, text on bottom, text on side)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It is supposed to be 960px regardless of where the text is placed.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Even for the "text on the side" options? It seems like you would want it shorter there? What about height?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The text on the side options is an opaque overlay over the image, so the image is still seen behind the background color (as shown in the feature slider here: http://www.nabi.cat/). The ideal height should be around 340px.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It looks like the height for the background style feature image is 380 and it scales up to fit the height and lets the extra image just be cut off. This looks like the default behavior, can someone confirm?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Usually the image shouldn't scale up. The top margin of it should align with the top of the slider.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have a pretty default installation and it seems to be scaling up. It also depends on if you are using Feature-Background or Feature-Media images. The Feature-Background scales up The Feature-Media does NOT scale up

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, I just got off the phone with Rangelone from Pagelines and it is not supposed to scale, though it is clearly scaling on my installation. Fun and weirdness ensue :).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sterling, the bug has been reported in detail. Thanks for your patience.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rangelone, thank you for helping me understand what was happening.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the update!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I had the same problem and it took a little while to figure it out. My goal was to have my site display consistently on desktop, laptop and particularly my Ipad in both horizontal and vertical view. The first thing you need to do is go to Pagelines - > Settings -> Layout Editor. Select Responsive with Pixel Width, verify Disable Mobile View is checked and scroll down to the Layout Dimension Editor. Select the layout all the way to the left, black square, one main column content. Here you can click and drag to change the global content width to 964px, make sure you Save Options. Now design your feature background in a image editor such as Photoshop. The pixel width should be set to 930px wide and the default height is 380px. Although you can change the height to whatever you want, for example 930px x 330px. Just make sure in the page meta or global meta settings you change the feature area height to match your image height. Now go ahead and create a new feature. Upload your image as a feature background image. Make sure you select the feature text position "Full Width Background Image" Hope this is helpful.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@drthomas23 Thank you for your insight.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0