CSS - Imagen de fondo

 
Vista:
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 30/11/2019 17:36:03
Hola, lo que quiero es poder llamar la imagen de fondo desde el php, el cual llamo al css mediante esta linea
1
<link rel="stylesheet" type="text/css" href="mystyle.css">
Luego, aca tengo el codigo css para la imagen, bueno, mi punto es que nose que poner en background-image: , esto debido a que no se como poner la ruta, o bien en donde debo guardar la imagen, gracias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.conten{
background-image: url("../imagenes/tubos.jpg");(aca nose que ruta poner o donde deberia guardar la imagen)
width: 100% ;
height: 100%;
background-size: cover;
  }
  .conten:before{
content: "";
width: 100%;
height: 100%;
background-color:   ;
position: absolute ;
opacity: 0.3;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 30/11/2019 20:44:20
Hola Sebastian, lo tienes puesto bien en el CSS, lo único que la ruta de la imagen yo la pondría absoluta desde el inicio de la web, no relativa, ya que el CSS se puede cargar en otras paginas y la ruta de la imagen seria incorrecta.

Prueba algo así:
1
background-image: url("/imagenes/tubos.jpg");

y en la raiz de la web pones la carpeta imagenes.

Si no te aparece, revisa la consola del navegador, ahí te indicara el problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 30/11/2019 23:50:03
Hola, disculpa mi desconocimiento, pero creo que mi problema esta en que nose como funciona eso de la raiz web, en este momento, tengo el css y el codigo php en la carpeta php y en la misma tengo a la carpeta imagenes, en donde esta la imagen que quiero poner de fondo, pero nose si debe ir ahi o donde corresponde, disculpa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 01/12/2019 19:44:49
Hola Sebastian, la carpeta raiz, es donde se encuentran los archivos y carpetas de tu web.

Prueba como te he comentado y revisa la consola del navegador.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 02/12/2019 03:03:10
imagen321

Como se puede ver, la imagen esta en la carpeta imagenes y se llama tubos.jpg, aca esta el codigo
body {

background-image: url("/imagenes/tubos.jpg");
background-size: cover;
}
Aun asi no puedo visualizarlo en la imagen de fondo, nose en que parte de la ruta me estare equivocando.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 02/12/2019 10:34:37
Hola Sebastian, parece esta bien... has revisado la consola del navegador??

Puedes pegar el código completo para probarlo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 02/12/2019 14:03:31
Como reviso la consola, con (f12)?, luego, aca esta el codigo, es un menu desplegabe, esta algo largo si

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<html>
  <head>
      <meta charset="utf-8">
    <title>Menu Desplegable</title>
    <style type="text/css">
 
      * {
        margin:0px;
        padding:0px;
      }
      body {
 
  background-image: url("/imagenes/tubos.jpg");
  background-size: cover;
}
 
      #header {
        margin:auto;
        width:500px;
        font-family:Arial, Helvetica, sans-serif;
      }
 
      ul, ol {
        list-style:none;
      }
 
      .nav > li {
        float:left;
      }
 
      .nav li a {
        background-color:#000;
        color:#fff;
        text-decoration:none;
        padding:10px 12px;
        display:block;
      }
 
      .nav li a:hover {
        background-color:blue;
      }
 
      .nav li ul {
        display:none;
        position:absolute;
        min-width:140px;
      }
 
      .nav li:hover > ul {
        display:block;
      }
 
      .nav li ul li {
        position:relative;
      }
 
      .nav li ul li ul {
        right:-140px;
        top:0px;
      }
 
    </style>
  </head>
  <body>
         <?php
           session_start();
        include("conexion.php");
        if (isset($_SESSION['idu']))
  {
 
    if(($_SESSION['grupo'])=='A')  {
?>
	<h1>Intranet propipe</h1>
    <div id="header">
      <ul class="nav">
        <li><a href="">Proyectos</a>
          <ul>
              <li><a href="">Proyectos</a>
              <ul>
                <li><a href="proyecto.php">Crear proyecto</a></li>
            <li><a href="modificarproyecto.php">Modificar Proyecto</a></li>
            <li><a href="eliminarproyecto.php">Eliminar Proyecto</a></li>
          </ul>
        </li>
            <li><a href="">Actividades</a>
                  <ul>
                <li><a href="agregaractividad.php">Agregar actividad</a></li>
            <li><a href="modificaractividad.php">Modificar actividad</a></li>
            <li><a href="eliminaractividad.php">Eliminar actividad</a></li>
          </ul>
        </li>
      </ul>
    </li>
        <li><a href="">Horas</a>
          <ul>
            <li><a href="horas.php">Agregar Horas</a></li>
            <li><a href="modhoras.php">Modificar Horas</a></li>
            <li><a href="elihoras.php">Eliminar Horas</a></li>
            <li><a href="cerhoras.php">Cerrar Horas</a></li>
              <li><a href="abrhoras.php">Abrir Horas</a></li>
          </ul>
        </li>
        <li><a href="">Personas</a>
          <ul>
            <li><a href="registro.php">Crear Usuario</a></li>
            <li><a href="registro2.php">Modificar Usuario</a></li>
            <li><a href="registro3.php">Eliminar Usuario</a></li>
          </ul>
        </li>
        <li><a href="">Informes</a>
          <ul>
            <li><a href="informes1.php">Obtener hojas de tiempo</a></li>
            <li><a href="informes2.php">Obtener detalle de proyectos y sus horas programadas</a></li>
            <li><a href="informes3.php">Obtener detalle de proyecto por semana</a></li>
            <li><a href="informes4.php">Hoja de horas por semana calendario</a></li>
          </ul>
        </li>
        <li><a href="ingreso.php">Cerrar Sesion</a></li>
      </ul>
    </div>
         <?php
  }
    if(($_SESSION['grupo'])=='B')  {
    ?>
    	<h1>Intranet propipe</h1>
    <div id="header">
      <ul class="nav">
 
        <li><a href="">Horas</a>
          <ul>
            <li><a href="horas.php">Agregar Horas</a></li>
            <li><a href="modhoras.php">Modificar Horas</a></li>
            <li><a href="elihoras.php">Eliminar Horas</a></li>
          </ul>
        </li>
 
        <li><a href="">Informes</a>
          <ul>
            <li><a href="informes4.php">Hoja de horas por semana calendario</a></li>
          </ul>
        </li>
        <li><a href="ingreso.php">Cerrar Sesion</a></li>
      </ul>
    </div>
         <?php
  }
  }
 
 
else{
 
  if(!empty($_POST['email']) && !empty($_POST['clave'])) {
$email=$_POST['email'];
$clave=$_POST['clave'];
$query =mysqli_query($conexion,"SELECT * FROM usuario WHERE email='$email' AND clave='$clave'");
$numrows=mysqli_num_rows($query);
 
 
if($numrows!='0'){
 
 
while($row=mysqli_fetch_array($query))
{
$dbemail=$row['email'];
$dbclave=$row['clave'];
$id= $row['id_usuario'];
$grupo=$row['grupo'];
}
 
if($email == $dbemail && $clave == $dbclave)
 
{
$_SESSION['idu']=$id;
$_SESSION['grupo']=$grupo;
?>
<?php
 if($_SESSION['grupo']=='A')  {
    ?>
 
	<h1>Intranet propipe</h1>
<div id="header">
      <ul class="nav">
        <li><a href="">Proyectos</a>
          <ul>
              <li><a href="">Proyectos</a>
              <ul>
                <li><a href="proyecto.php">Crear proyecto</a></li>
            <li><a href="modificarproyecto.php">Modificar Proyecto</a></li>
            <li><a href="eliminarproyecto.php">Eliminar Proyecto</a></li>
          </ul>
        </li>
            <li><a href="">Actividades</a>
                  <ul>
                <li><a href="agregaractividad.php">Agregar actividad</a></li>
            <li><a href="modificaractividad.php">Modificar actividad</a></li>
            <li><a href="eliminaractividad.php">Eliminar actividad</a></li>
          </ul>
        </li>
      </ul>
    </li>
        <li><a href="">Horas</a>
          <ul>
            <li><a href="horas.php">Agregar Horas</a></li>
            <li><a href="modhoras.php">Modificar Horas</a></li>
            <li><a href="elihoras.php">Eliminar Horas</a></li>
            <li><a href="cerhoras.php">Cerrar Horas</a></li>
              <li><a href="abrhoras.php">Abrir Horas</a></li>
          </ul>
        </li>
        <li><a href="">Personas</a>
          <ul>
            <li><a href="registro.php">Crear Usuario</a></li>
            <li><a href="registro2.php">Modificar Usuario</a></li>
            <li><a href="registro3.php">Eliminar Usuario</a></li>
          </ul>
        </li>
        <li><a href="">Informes</a>
          <ul>
            <li><a href="informes1.php">Obtener hojas de tiempo</a></li>
            <li><a href="informes2.php">Obtener detalle de proyectos y sus horas programadas</a></li>
            <li><a href="informes3.php">Obtener detalle de proyecto por semana</a></li>
            <li><a href="informes4.php">Hoja de horas por semana calendario</a></li>
          </ul>
        </li>
        <li><a href="ingreso.php">Cerrar Sesion</a></li>
      </ul>
    </div>
         <?php
  }
 
 
 
if(($_SESSION['grupo'])=='B')  {
    ?>
    	<h1>Intranet propipe</h1>
    <div id="header">
      <ul class="nav">
 
        <li><a href="">Horas</a>
          <ul>
            <li><a href="horas.php">Agregar Horas</a></li>
            <li><a href="modhoras.php">Modificar Horas</a></li>
            <li><a href="elihoras.php">Eliminar Horas</a></li>
          </ul>
        </li>
 
        <li><a href="">Informes</a>
          <ul>
            <li><a href="informes4.php">Hoja de horas por semana calendario</a></li>
          </ul>
        </li>
        <li><a href="ingreso.php">Cerrar Sesion</a></li>
      </ul>
    </div>
         <?php
  }
 
  ?>
   <?php
}
}
else {
     echo "<script>
                alert('Contraseña incorrecta');
                window.location= 'ingreso.php'
    </script>";
 
}
}
else {
  echo "<script>
                alert('Falta rellenar los campos');
                window.location= 'ingreso.php'
    </script>";
}
}
?>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 02/12/2019 15:12:30
Si, si, la consola es el F12...

Yo he cogido tu código, y he cambiado el nombre de la imagen de fondo y me ha funcionado perfectamente!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 02/12/2019 15:23:14
GRACIAS!!, la consola no lo encontraba, alfinal la meti a la carpeta php, la guarde bien y ahi me aparecio, lo malo es que tengo que buscarlo por esta extension:
background-image: url("/php/propipe.jpg.jfif"); , nose si es normal
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 02/12/2019 17:00:36
huy... la verdad es que no es nada normal el .jfit!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por sebastian (6 intervenciones) el 02/12/2019 21:37:59
Que se me guarda como .jfit ("/php/propipe.jfif"), de hecho esta quedando asi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 412
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Imagen de fondo

Publicado por joel (64 intervenciones) el 03/12/2019 13:52:30
Pero que programa utilizas que guarde con esa extensión?? los formatos estandard de la web son png, jpg y gif... fuera de estos, no seria aconsejable.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar