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