Hi,

I’d like to add a background image that will show behind all my sites content like this does http://www.datingadvice.com.

Any idea how I can do this?

Thanks.

Derek

Hi folks, does anyone know how to change the background colour of individual columns, created using the layout builder?

I have a page with 3 column elements containing text and an image, and I want to give them each it’s own background colour, by targeting them with a custom style – in the same way you can with Colour Sections.

Any helps is appreciated.

Thanks,
G

I’d like to use a custom background image that will look great on every device. This image should be small enough in file size to not hinder load times while large enough to fit on the highest resolution screen available. Hopefully you guys have already figured this out and can give a simple answer similar to this:

1. Optimum Dimensions – 2880×1800
2. Optimum File Size – No more than 100KB

So far, here’s all the info I’ve gathered:

QUESTION: Why doesn’t the background I created look good on my desktop? It looks fine on my laptop?

ANSWER: The background that you created in the IndexPureRide.psd is 1494×1192. I edited that background image to 1920×1192 which works on most displays but if you check the site on an iPhone 5, the height isn’t enough to fit the screen. Along with that, the image has been optimized and is still 607KB. For optimum site loading, we need this number to stay around 100KB. After all, Slower load time = unhappy users = fewer sales…

If we’re ok with having slower load times and still want our site to have a large fixed background, we need to recreate this in order for it to fit nicely on all screen sizes and resolutions. Below is a list of the many resolutions being used today for your reference.

COMPUTER RESOLUTIONS:
13″ MBP 1280×800
13″ MBP (Retna) 2560×1600
15″ MBP (Retna) 2880×1800
21″ iMac 1920×1080
27″ iMac 2560×1440

TABLET RESOLUTIONS:
iPad Mini 768×1024
iPad 2 768×1024
iPad Mini (Retna) 1536×2048
iPad Air 1536×2048
Google Nexus 5 1080×1920
Google Nexus 7 1200×1920
Google Nexus 10 1600×2560

PHONE RESOLUTIONS:
iPhone 4S 640×960
iPhone 5-5S 640×1136
Galaxy S3 720×1280
Galaxy S4 1080×1920
Galaxy Note 3 1080×1920

*1920×1080 is 1.78 to 1 ratio (16×9), as is the currently most common resolution of 1366 x 768.

ALONG WITH THAT, I HAVE THE SECOND EMAIL THAT MAY HELP US FIND THE RIGHT ANSWER:

QUESTION: So, I’m not sure how it works when moving from a full site to mobile but I think the optimized bg works well on a computer. However, it does look strange on mobile devices and I’m not sure how to fix this. Is it possible to create one bg that works for every device while not hurting us regarding load times?

ANSWER: If you check the site on a computer it looks good bc the image is 1920×1192. This is larger than 1920×1080 so our current bg covers most computer and TV resolutions. Here’s where it gets a little complicated.

Lets say you check the site on an iPad mini without a Retna display (768×1024). Everything looks fine bc our image of 1920×1192 will cover the screen both horizontally and vertically with no problem. The issue comes when the resolution gets larger than 1920×1192 in either direction and that’s what we need to address. Based on the resolution chart I created in the previous email, if we create an image that’s 2560 (to cover the width of the 27″ iMac and Google Nexus 10) x 1920 (to cover the height of the Galaxy Note 3), our bg will look good no matter what device you’re using.

*I believe Apple Retna displays such as the 15″ MBP (2880×1800) work a little different but I’m not sure. They use a technology to cram more pixels into the same space making the pixels invisible to the eye. If you open a website with a 1920×1080 bg, it’s not going to open as a small image in the center of the screen. Instead, the image will be displayed as a full image covering the whole screen, it just won’t be as sharp. If this is correct, 2560×1920 will work. If this is incorrect, I believe we need to make it the same as a 15″ MBP (Retna) which is 2880×1800. God I hate this… :)

Also, most websites with full screen bg’s use an image that fades into black or white on all four edges/corners so that once the resolution gets larger than 1920×1080, it doesn’t matter what resolution you’re using, the image stays centered and doesn’t take up hundreds of KB’s slowing down the loading time of the site. In summary, If you could create an image that’s 2560×1920 image where all four edges/corners are black with your splash in the center, this should be optimum. If this is incorrect, I’m going to look for a tall bridge and …

Cheers!