CSS Background Image

问题

I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!

As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.

The image is attached, Any help or suggestions on how to manage the image are much appreciated.

Cheers

回答1:

That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.

I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.

I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.

I hope for you that mobile browsers in a vertical position are not a requirement...

回答2:

you can split ('old style' way) the image in parts (in a glace, a header, a right column, a footer) and use'em as background images for divs. I suggest using photoshop built-in funcions "save for websites" to optimize the image (as Jpeg) to get the best ratio 'small file - best appearance' (something like medium (50 or 60) quality, multiple passage otpimization and a 1000 px width). This if you want to keep the fixed layout..

回答3:

What resolution is the website designed for?

I found that resizing the image to 1280px width (911px height) works nicely for a browser window size of 1024x768, which is pretty much the minimum that anybody's going to be using these days.

With this CSS:

body {
    background-image: url('/path/to/your/background.png');
    background-position: left bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}

.. the main part of the picture (people holding the frame) will always be in view, and larger browser viewports will get more of the top and right portions of the picture.

However: Anybody with a browser with above 1280px will see the plain black background color.

Edit: There's also the CSS3 property background-size: 100%;, which will automatically shrink/stretch the image to fit the browser viewport.

Update: I found that PNG-8 gave me the best quality-vs-filesize for the resolution I mentioned above. It came in at 280KB, whereas a comparable quality JPG was in the 330KB range.

回答4:

Consider using a fixed size layout with the same aspect ratio as the image and resize the image to the same dimensions as the layout. You can then either set the background colour to the same black as the image or a complementary colour.

A layout of around 1000px * 700px works well on most computer displays.

If you must have a flexible layout then it would be really nice if you could separate the components of the image (do you have all the layers?). ie the frame/people, the red floral designs of the corners, and the background with crossed bands.

Then use several divs and some javascript so that the frame and hands stays locked in position relative to the bottom left corner, the floral designs always gravitate towards the four corners and the background moves so as to keep the frame in the dark diagonal area; kind of sliding up and to the right along the red band. (I can see it in my minds eye bt it's hard to describe.)

来源：https://stackoverflow.com/questions/4890010/css-background-image