Advanced Search

Return to Snippet

Revision: 63485
at May 11, 2013 05:15 by kickass
Initial Code 
body{
     background-image: url(../images/bg.jpg);
     background-repeat: no-repeat;
     background-color: #000;
     background-size:contain;
}

body{
     background-image: url(../images/bg.jpg);
     background-repeat: no-repeat;
     background-color: #000;
     background-size:cover;
}

/* best choice below */

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
"Contain" maintains aspect ratio of the image while giving a full screen  - will scale down but wont scale up beyond 100% of its own dimensions and doesn't repeat by default
"Cover" will crop either crop or stretch the image to cover the full screen - seems to be setting image to 100% of screen size regardless of browser window size

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS3 fullscreen background image - contain and cover options

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS