1. How to make a image auto scalable in any resolution?
Code:-
Code:-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%; ">
<img src="Images/home_pm_bg.jpg" style="width:100%" />
</div>
</form>
</body>
</html>
or
add class="img-responsive"
2. How to make a image background cover?
or
add class="img-responsive"
2. How to make a image background cover?
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
;
}
3.How to make a
Div background image auto scalable?
Use bootstrap links
to fit perfectly given above
<div class="container" style="
position: relative;
background-image: url(images/bg.jpeg);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: 57.64%;">
position: relative;
background-image: url(images/bg.jpeg);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: 57.64%;">
<div ">
4.How to keep footer at bottom of page?
<div id="body"></div>
<div id="footer"></div>
</div>
4.How to keep footer at bottom of page?
<div id="container">
<div
id="header"></div><div id="body"></div>
<div id="footer"></div>
</div>
CSS:-
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height
of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
And one simple CSS rule for IE 6 and IE 5.5:
#container {
height:100%;
}
No comments:
New comments are not allowed.