A difference between Preview and Live

I understand that some things will not work correct (i.e. scripts et al) but basic elements should be a bit better no?

Screenshot of editor view:


(The space above the image is due to the menu being fixed on screen.)

Live view:

How is it that the image looks fine in the editor but is quite different in the live site?

Also, the image is only 300px tall but I’ve had to stretch it to 350 to get it to show the head of the person in the image but the live version, the head is cut off.

Live view of post in question: http://famousframus.webflow.io/post/your-friendly-neighbourhood-famous-framus-here-and-im-coming-back

So, I’m pretty sure I need to learn more about images and screenwidths but are there some general guidelines that should be used for full-width images?

Also, do you think it would be better for this site NOT to use a full-width image for this particular site? The posts from the client are generally pretty short.


Here is my public share link: LINK

The image will look the same in the designer if you make your browser wider. Or look the same in publish if you make it narrower.

Your image is only a background set to fill the section at all costs. (at crop cost). As your section is fixed in height it seems, well you can figure that the image can’t appear the same. Imagine the same image having to fill a square and a rectangle. This is what happens here.

If you want the head of the guy to be shown at all times you can set the bg image to anchor on top.

When you use a full width image like this, if you don’t set the section to at least 500 in height then you’ll run into that issue often.

Thanks @vincent, I’ve played around with the image anchoring/location and got a decent balance. While I won’t be keeping that specific image, this thread will help me keep in mind all these things that help tweak the layout.

Depending on the image content, I anchor images in the middle, top, bottom and sometimes on the right or left. It proves to be very very effective at keeping the important elements in view.

Correction, the image does change but not quote enough. Guess I’ll have to play with the base image to get this right.

Yeah, centre does seem to work better.

Hi @DragonDon, this is a good article, worth a few moments to read about planning images and taking into consideration the aspect ratio. The Best Full Screen Background Image Sizes for Web Design | Web Design & SEO, Kona, HI

If you do not want to read the whole article, here were the authors summary:

  • 1440 x 900 is my magic number for general full screen backgrounds.
  • If it is a partial screen height design, then I keep 1440 and do whatever height is called for.
  • If it is a full width background slider with more than 3 or 4 images, I size it down as far as 960 x 600 to save on load time without diminishing image quality too much when they stretch.
  • If you can, use media queries to serve from a pool of 3 or 4 perfectly-sized images for each image in your background

I hope this helps.

3 Likes

Yes sometimes you have to “prepare” your content for this purpose. Photoshop FILL options are wonders for that, you can increase a padding and fill it automagically, especially if it’s a sky, a ground etc.

Great article with actual numbers Dave :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.