Background Image

Get Started
1

Hi,

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.

Here is the site:
http://members.westnet.com.au/zelky/erinmcgowan/index.html

2

The problem is the scaling and retaining the aspect ratio. Have a look here. They use several ways incl. CSS 3.

3

Wow that’s some great info. I goggled but I guess I was googling the wrong terms.

Thank you very much. I’ll try one later and repost the link.

4

You’re welcome. Glad it is off help to you

5

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.