Background images - Post ID 276598

User 2699991 Photo


Registered User
5,397 posts

By the way unless you haven't updated the site yet, I doesn't look ant different on laptop or desktop from before
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 244626 Photo


Registered User
811 posts

I just checked and see the images have updated here. The larger images certainly are sharper as Wayan suggested.

I would suggest that you consider making a set of picture groups based on your break-point spans. You can then change the url for each of the background break-point spans targeting the lower break-point which will give you the same quality but a more nimble download size.

For instance if you have a break-point span from 640 px to 1080 px you would make the image 1080 px and then go to the background image url and change the link to that smaller sized picture in your resources. This way you serve background pictures to devices that will only require that max size for the screen.

The only problem with doing this is that most mobile devices now are either retina or hd display and require more pixels to fill the area of a normal sized picture. The rule seems to be to double the pixel size of the image. The correct way to serve pictures to retina and hd seems to be to provide both a regular and a retina hd 2x or 3x version. I have not figured out a way to do this yet....has anyone ?
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.