Welcome to Designers Dairy blog here i have posted How to make a
Background image in
full screen in browsers
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Add the css code in Style sheet
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Step 2:
Html Code :
</head>
<body>
<img src="bg.jpg" width="1024" height="683" class="bg">
</body>
CSS :
Step: 2
Css:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Script :
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
full screen in browsers
Step1:
Create a Image with width size 1024 or more as u wishstep2:
Add these css codehtml
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Step3 :
It will Support in Browser like IE 9 and IE 10 , Firefox, Safari and Google ChromeTo Fix Background Image in Full Screen Browsers7 and IE 8 by
Calling the class in Image
Step1:
Add the css code in Style sheet
img.bg {/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Step 2:
Html Code :
</head>
<body>
<img src="bg.jpg" width="1024" height="683" class="bg">
</body>
To Fix Background Image in Full Screen in IE 8 by Calling the class in Div
Step1:
HTML CODE:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>CSS :
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
} To Fix Background Image in Full Screen in IE 7 use Java script
Step1: Html Code: Step: 2
Css:
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Script :
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
No comments:
Post a Comment