I’m putting the question here instead of in email to @multithemes because perhaps someone else has the same issue. I’m building a website (www.wikibeaks.org) using the Laxis theme. I created my own banner images for most of the pages and made them the same size as the default ones. But they display way too large - the edges are always cut off. And if I drag the browser smaller, the image crops in instead of resizing. On the Multithemes home page, you can see a very nice resizing - if I drag the window smaller, the image gets smaller, up to a point - then it crops to a close-up, which also resizes.
Am I missing a setting for this in page properties? I’m guessing it has something to do with max page width, flexible/fill settings, but nothing I’ve tried makes it work properly and I wonder if it’s some oddball setting …
HI @kentuckienne maybe depends on the aspect ratio of the image, the suggested size would be 1700 x 1133
In this theme the background image is optimized to be visible at the top of the page (basically it is a header)
Make sure also to use the option “banner image - cover”.
moreover the images of the parrot seem different in size
I would try your images, drop me an email at infoATmultithemes.com
I sent a long email describing some testing … after making sure both images were exactly the size specified I tested different options. My page specifies the banner using CSS which should override the theme background.
If I select any of "Fluid Image 1 (normal + blurred) through “Fluid Image 11”, the banner behaves the way I’m used to - regular image followed by the second, altered image. Image size is not responsive to changes in the browser window.
If I select either “Banner Image - Cover” or “Banner Image - Tile” the banner adds something extra: the second image is now also blurred. Otherwise it behaves just the same as the others. The banners don’t shrink when the browser does, they just get cropped from the side.
The Multithemes home page does something different - if I make the browser smaller, your banner shrinks proportionally up to a point. Once the window hits a certain size, the banner goes back to the full size image and gets cropped, but does not shrink any more.
I’m wondering if I messed something up in the Responsiveness settings with my CSS… but your page shows both behaviours, so there must be more to it. Something about the change from desktop to tablet to phone? Is it my code, the theme, or RW itself?
Fixed! and I am chagrined at the reason, but maybe someone can learn from my errors.
Thank you, @multithemes … the revised images didn’t change anything … and then it hit me … the problem was an optical illusion.
I’d noticed that your images stayed centered as they changed size, and then it hit me … the visual focus point of my image was to the right, not in the center. The actual center of the image WAS in fact staying centered on the available space, but since the focal part of the image - on the right side - was being cut off, it exaggerated the changes. I took a different image, cropped it to put the visual focus in the center and mostly blank space to the right, and used that for the banner. And now it looks just like it should.
I’m not the only person to run into this, right? Or is this a basic part of responsive website design that everybody already knows? It also seems to be a right-handed thing … I always shrink a window by dragging the right edge to the left, because my mouse hand is on that side of the screen. Do left-handed people do the opposite, shrink windows from the left? I think I have to check all my images to make sure that the images still look good to me either way.
Karen probably the photo editing program applies a frame for this specific filter.
A fast way to check the overlapping with photoshop is to use the layers properties.
the upper image is in “difference” and you can see the outlines and align the image ( both images in the same resolution)
