CSS3 and Big Backgrounds

The increasing of monitor resolution and the internet speed are some reasons that make a web with large background more popular. There are few important things to consider when we designing a web with large background images. The first thing is to make sure that there is a perfect contrast between image and text so that users still be able to read the content. The second is your image must be in high resolution to attract your user.

CSS3 brings with its one solution, that when fully supported should help to overcome some of the issues surrounding responsive images. Again, it’s not the most perfect solution but it does have plenty of potential. The CSS3 background-size property provides a number of solutions. User can specify the size of the background images using length, percentage, or by using keywords ‘contain’ or ‘cover’.

Setting the background-size to auto sets the image to its original size. for example:

#bgimage{background-size:auto;}

specific size can be set for height and width, but the values to look out for are contain and cover. Contain scales and image while preserving the image’s proportions. Cover scales and image, but to the smaller dimension so the containing div is always ‘covered’, ie fullscreen.

background-size will be useful for those web using large background and will be scaled when the browser resized while maintaining its aspect ratio. Some popular browser supported this new format including Firefox, Safari, Opera, Chrome and Internet Explorer.

Here is one of the example of a web using large image background. This is the website of the Amazing Spiderman. It use a large image(1820×667) and I tried to resize my browser and take a look the result.

Maximal view

amazing spiderman normal view large background image

Resized into 1024×768

resized image large background

Resized into 637×768

smaller view large background image

 

 

Be Sociable, Share!

Related Posts:

No Comments

Add a Comment

Your email address will not be published. Required fields are marked *