Chris also supplies several alternative approaches. The result will be a background image behind the content that will rescale to the size of the browser window.Ĭhris Coiyer has a very nice recipe for fullscreen background images that is applied to the element:īackground: url(images/bg.jpg) no-repeat center center fixed Īgain, you’ll need to apply vendor prefixes to the background-size property to gain coverage in older browsers. “The Piazza” forms the social, religious and political centre of Venice…Īpply the following CSS (you’ll have to add vendor prefixes to gain support in older browsers):īackground: url(st-marks-square.jpg) center no-repeat įont-family: Cochin, Times New Roman, Times, serif Piazza San Marco (often known in English as St Mark’s Square), is the principal public square of Venice. Whatever solution you choose, you should also define background-color in the same selector as a fill color for areas not covered by the image this will also act as a fallback in case the image fails to load. You will likely need to test all three options to determine which one is most appropriate for your page, audience, and content. Setting it to 100% (representing width) might be a better solution for older browsers.Īlternatively, you can use background-size: contain, which gives preference to the image, ensuring that all of the background image is shown no matter what the aspect ratio or size of the browser window is. You have several choices when it comes to background-size for the body: setting the property to cover will dynamically scale the background image such that it always scales to whatever dimension is largest (height or width of the browser window). With those conditions in mind, the CSS do make the background dynamic is very easy it's called background-size. Keep in mind standard rules in regards to background images: you want content on top of the image to be legible and easily seen.This means that you will have to choose a background-color to fill the space where the image is not present. As a general rule, do not write CSS to change the aspect ratio of the background image in response to the browser being resized that is, do not attempt to fill the entire background with the image.Everything else being equal, a high resolution image dynamically scaled down will tend to look better than a low resolution image scaled up if limited to using just one picture for all devices, err on the side of caution and use a higher-resolution image for your background.Remember that mobile devices count too! You may want to use an query to load in a 320 × 480 background image for mobile devices as an alternative to the large image that you will load for screens. The best solution would be to study stats from an existing site by using analysis software such as Google Analytics as of 2015, I would recommend an image resolution of 1200 × 800 as a starting point. Do some research on average screen sizes before committing to a resolution for your background image.You will likely need to balance this with other demands on your page. Full-screen, high quality images tend to be associated with large file sizes.If you decide to go down this particular design route, there are a few points to keep in mind: Links in recent articles here have provided some examples: thesixtyone and youarelistening.to (from “ Music to Code By”), along with sites like Flipboard. Large, illustrative background images appear to be the trend in web design this year.
0 Comments
Leave a Reply. |