css - otro - superponer modal
¿Agregando imagen de fondo a div usando css? (8)
Agregue propiedades de alto y ancho a su archivo .css.
He estado tratando de agregar una imagen de fondo a una clase div usando css. pero no tienen exito
Código HTML:-
<header id="masthead" class="site-header" role="banner">
<div class="header-shadow"></div>
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation">
</nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
CSS: -
.header-shadow{
background-image: url(''../images/header-shade.jpg'');
}
Información Adicional:
Esta es una imagen con sombra y la estoy usando en la parte superior del sitio web, por lo que no debe tener un ancho en particular.
Dar altura y anchura:
.header-shadow{
background-image: url(''../images/header-shade.jpg'');
height: 10px;
width: 10px;
}
Está sucediendo porque .header-shadow está vacío.
Dale height a ello.
.header-shadow{
background-image: url(''../images/header-shade.jpg'');
background-color:red;
height:50px;
}
Necesita un width y una height de la imagen de fondo para que se muestre correctamente.
Por ejemplo,
.header-shadow{
background-image: url(''../images/header-shade.jpg'');
width:xxpx;
height:xxpx;
}
Como mencionó que lo está utilizando como una sombra, puede eliminar el width y agregar una background-repeat (ya sea vertical u horizontalmente, si es necesario).
Por ejemplo,
.header-shadow{
background-image: url(''../images/header-shade.jpg'');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
height:xxpx;
}
Espero que esto ayude.
PS: xx es un valor ficticio, debe reemplazarlo con los valores reales de su imagen.
Puedes probar esto también para configurar la clase en la sección div;
/**CSS**/
.content {
background: url(''http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png'') center no-repeat;
}
.displaybg{
text-align:center;
color:#FFF;
}
<div class="content">
<p class="displaybg">This is just a test</p>
</div>
Usar una imagen para el fondo del cuerpo en CSS.
body {
background-image: url("image.jpg");
}
.content {
background: url(''http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png'') center no-repeat;
}
.displaybg {
text-align:center;
color:#FFF;
}
<html>
<head>
<style type="text/css"><!--
body{
margin:0px; padding:0px;
}
.wrapper{
margin:0px auto;padding:0px;
width:940px;
background-color:#eee;
background-image: url("images/bg.png");
background-repeat:repeat-y;
padding: 0px 25px 4px 25px;
}
.header{
}
.headerIn{
width: 940px;
margin: 0 auto;
font-size: 14px;
}
.headerP1{
width:940px;
background:url("images/lines_tech.png") repeat;
margin: 0px auto;
height:140px;
}
.container{
width: 940px;
margin: 0 auto;
font-size: 14px;
height:auto;
}
.footer{
width:100%;
background:#eee;
}
.footer {
width: 940px;
margin: 0 auto;
font-size: 12px;
font-family: Georgia,"Times New Roman",Times,serif;
/*background: url("images/footer_bg.png") center bottom no-repeat;*/
}
.mainfooter{
width:990px;
background: url("images/footer_bg.png") no-repeat;
margin-bottom:50px;
margin: 0 auto;
}
.footer .footerContiner {
width: 940px;
margin: 0 auto;
font-size: 11px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
.input {
padding: 5px 5px;
margin: 0px 0px;
border: solid 1px #dedede;
background-color: #f9f9f9;
font-size: 12px;
}
.tbl{margin: 0 auto;
padding-bottom:3px;
background: url("images/tblbtm.png") repeat-x bottom;
}
.tbl1{
background: url("images/tblright.png") repeat-y right;
padding-right:2px;
}
.button{
background:royalblue;
color:#fff;
border:none;
padding: 5px 7px;
cursor:pointer;
}
ul {
list-style: square outside none;
}
ul li{
display: block;
height: auto;
line-height: 29px;
text-decoration: none;
background-color: #f6f6f6;
padding-left: 30px;
font-family: Verdana;
border-bottom: 1px solid #ebebeb;
background-image: url(''images/arrowC.png'');
background-repeat: no-repeat;
background-position: left -30px;
}
.DivTab1 {
width: 270px;
height: 199px;
}
.DivTab1 a {
background-image: url(''images/nav_bg.jpg'');
background-position: 0 0;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
color: #000;
}
.DivTab1 a:hover {
background-image: url(''images/nav_bg.jpg'');
background-position: left 33px;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
}
--></style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="headerIn">
<div class="headerP1">Header</div>
</div>
</div>
<div class="container" id="tblbdr">
<div class="tblt" style="padding:10px;background:#fff; width:500px;margin:0px auto;">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="500px">
<tr><td>Login</td></tr>
<tr><td><input type="text" class="input" /></td></tr>
<tr><td><input type="text" class="input" /></td></tr>
</table>
</div>
<br /><br />
<div class="tbl">
<div class="tbl1">
<table border="0" style="background:#fff;" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="width: 79px">
State<span style="color: #ff0000">*</span></td>
<td style="width: 183px">
<select name="drpOwnerState" onchange="javascript:setTimeout(''__doPostBack(/'drpOwnerState/',/'/')'', 0)" id="drpOwnerState" class="input" style="width:173px;">
<option value="NA">Select</option>
<option selected="selected" value="AN">ANDAMAN AND NICOBAR ISLANDS</option>
<option value="AP">ANDHRA PRADESH</option>
<option value="AL">ARUNACHAL PRADESH</option>
</select>
</td>
<td style="width: 65px">
Division<span style="color: #ff0000"></span></td>
<td style="width: 187px">
<select name="drpOwnerDivision" onchange="javascript:setTimeout(''__doPostBack(/'drpOwnerDivision/',/'/')'', 0)" id="drpOwnerDivision" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select>
</td>
<td style="width: 56px">
District<span style="color: #ff0000"></span></td>
<td colspan="3">
<select name="drpOwnerDistrict" onchange="javascript:setTimeout(''__doPostBack(/'drpOwnerDistrict/',/'/')'', 0)" id="drpOwnerDistrict" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select></td>
</tr>
<tr>
<td colspan="3">
Type any detail about your nearest KIOSK:</td>
<td colspan="5">
<input name="txtSearch" type="text" maxlength="100" id="txtSearch" class="input" style="width:182px;"></td>
</tr>
<tr>
<td align="center" colspan="8" style="height: 23px">
<input type="submit" name="btnsearch" value="Search" onclick="return ListValidation();" id="btnsearch">
<input type="submit" class="button" name="lblExport" value="Export To Excel" id="lblExport"></td>
</tr>
</tbody></table>
</div></div>
<br /><br />
<div class="DivTab1" style="z-index: 750;">
<a href="/Portal/CitizenHome.aspx?servtypeid=1">Applications</a><a href="/Portal/CitizenHome.aspx?servtypeid=2">
Bill Payments</a> <a href="/Portal/CitizenHome.aspx?servtypeid=3">Counseling</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=4">Assessment</a> <a href="/Portal/CitizenHome.aspx?servtypeid=5">
Religious</a> <a href="/Portal/CitizenHome.aspx?servtypeid=6">Reservation</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=7">Universities</a>
</div>
<br /><br />
<div>
<ul>
<li><spn>This is testing code which may be more or less.</span></li>
<li>This is testing code which may be more or less. This is testing code which may be more or less.This is testing code which may be more or less. This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footerContiner">Footer</div>
</div>
</div>
<div class="mainfooter"> </div>
</body>
</html>