I’m trying to create background images for websites after only using colours etc for background.
I’ve got a monitor that is full HD (1920 x 1080) and I’ve set up an image that is that size, and put an image of the fighter (its a boxers website) on the right hand side.
I then looked at the site on my laptop. Doh! The resolution is 1440 x 900, so you can’t see the image of the fighter.
What size should I create the background so that it “fits” different resolutions, and still looks ok at 1920 x 1080.
The site is not required now, but I still need to sort out the background image issue.
They key to a good background that works on different screen sizes is to make sure that the focal point first onto a smaller screen size. You can then use background-position to make sure that this is always on the screen, and the less important edges are chopped off.
That doesn’t mean you have to put your focal point in the middle! If the most important bit of the picture is three-quarters of the way along and a third of the way down, set background-position:75% 33%;, and that will keep the image pinned to that point.