How to use large Background using CSS

How to use the background image which will result better on high resolutions as well as low.

We usually put a image on background with specified pixels which looks fine on smaller resolutions but on higher resolutions it crops the images from both sides which is a common mistake.

In this tutorial we are gonna learn a quick fix for this mistake. I am going to show you two ways to do it first one is general CSS code with width defined in percentage for an image and in second we will use two images to make a proper background. Lets start with first example.

The first example is pretty easy, we will specify the position as centered top for the body element and width to 100% here is the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  padding: 0;
  margin: 0;
  background: #fff url(bg.jpg) no-repeat center top;
  width: 100%;
  display: table;
}

We used Opx for padding and margins and a color with the image as a background, now this is the part which do the trick, choose a background image and fill its edges with the solid color for example we have a image of flower and all edges are white so u used white color as background which will feel like the part of the image as shown in figure below

Second trick is to use the image instead of background color. Here is the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
	padding: 0;
	margin: 0;
	background: #fff url(tex-bg.png);
}
#wrapper {
	background: url(top-bg.png) no-repeat center top;
	width: 100%;
	display: table;
}

The above part is same as the single image background which uses the textured background as the body background and it will keep repeating it self and the wrapper block will put another image on the body background.

we have chosen the same pattern from the image which will look more better as background



Related posts

Tags: , ,

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.