Background from photoshop to html

Question

I created a background image for my website in photoshop and i want it to apply on my webpage as it look like in photoshop.

How can i use the created image for my website background without using repeat property in css. I want this background to fill the screen without losing any effects/gradients and works with every resolution.

Can i do it without exporting image in full resolution of screen? Or any other alternative way. Or i need to do it with exporting in full resolution of screen.

Answer 1

To create full screen image use css:

html {
background: #e7e9ef url('image.jpg') no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%; 
}

body {
min-height: 100%; 
margin: 0;
padding: 0;
}

Your image not have to be full image screen resolution - it will be stretched but of course to achieve decent effect you should rather use quite big image - I used 1920px x 1285px but of course it need to be compressed as much as possible.

You should also consider what happened if user visit website using mobile devices. Big images takes a lot of transfer so you should also consider preparing smaller images and use media queries to give such user smaller image.