Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
ayuda para poner logo sobre imagen de cabecera
#1
este es un proyecto que estoy realizando y quiero pedirles ayuda para poner un logo sobre la imagen de cabecera
Código:
<html>
<body background="https://i.imgur.com/Jn3CQjj.jpg">
<head>
<div align="center">
<img src="https://i.imgur.com/Akz5msh.png" alt="abc" title"imagen abc"/>
</div>
</head>
</body>
</html>
e tratado barios intentos si me pueden ayudar porfa
[Imagen: 0sUwY1x.png]

no me se el código para agregarlos sobre la imagen este logo llevara un url que lo direcciona a la misma web o portada
@cachencho29 (Rodrigo Reyes)
WWW
#2
Mmmmm dinos si trabajas en un sitio basado en html o con algun foro, blog o CMS...
#3
has un div dentro del header y a este puedes llamar el logo ya sea <img src="" >Imagen del logo< /img> o como un background en el mismo y para hacerlo mas practico y profecional usa un class para llamarlo via css
WWW
#4
Para mostrar un elemento sobre otro, como dice el propio enunciado, hay que colocar un elemento dentro de otro, siendo el de dentro el de enfrente.

Por ejemplo, suponiendo un logo de 140x140 (el color rojo de fondo sólo lo coloqué para que se viera Lengua):

Código:
<!DOCTYPE html>
<html>
<head>

<style type="text/css" rel="stylesheet" media="all">
*{margin:0;padding:0;}

body{
    background:url(https://i.imgur.com/Jn3CQjj.jpg) 50% 50% fixed;
}

#header{
    width:861px; /* el ancho de la imagen */
    height:100px; /* el alto de la imagen */
    background:url(https://i.imgur.com/Akz5msh.png) 50% 50% no-repeat;
    margin:25px auto 0;
}
#sub-img{
    width:140px; /* el ancho de tu logo */
    height:140px; /* el alto de tu logo */
    background:red url() 50% 50% no-repeat;
    margin:-20px 0 0;
    position:absolute;
}
</style>

<title>Imagen sobrepuesta</title>
</head>
<body>

<div id="header"><div id="sub-img"></div></div>

</body>
</html>

[spoiler][/spoiler]

Te recomiento no usar CSS "in-line" (ese que usas tipo <img style="...") ni mucho menos atributos obsoletos (como background o align) Guiño
WWW
#5
gracias compañero muchísimas gracias soy novato en este tema de los codigo pero mi idea es dicir algun dia esa web la ise yo
@cachencho29 (Rodrigo Reyes)
WWW
#6
hola amigo así va el progreso de mi web e investigado un poco y el encabezado quedara asi

Código:
<!DOCTYPE html>
<html>
<head>

<style type="text/css" rel="stylesheet" media="all">
*{margin:0;padding:0;}

body{
    background:url(https://i.imgur.com/Jn3CQjj.jpg) 50% 50% fixed;
}
#header{
     background: #000 url('https://i.imgur.com/EQ1EWhO.png') repeat-x;
    height:136px;
     box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
     -moz-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);

}
#sub-img{
    width:300px; /* el ancho de tu logo */
    height:140px; /* el alto de tu logo */
    background: url(https://i.imgur.com/i2DQ8RJ.png) 50% 50% no-repeat;
    margin:-20px 0 0;
    position:absolute;
}
</style>

<title>Imagen sobrepuesta</title>
</head>
<body>

<div id="header"><div id="sub-img"></div></div>

</body>
</html>

imagen demo
[Imagen: gzeEhzf.png]

ahora al logo di ziport como le pude poner un url si pueden ayudarme
@cachencho29 (Rodrigo Reyes)
WWW
#7
Código PHP:
<!DOCTYPE html>
<
html>
<
head>
<
link href="css/style.css" rel="stylesheet" type="text/css" />
<
title>Imagen sobrepuesta</title>
</
head>
<
body>
<
header>
<
div class="header"><div id="sub-img"><a href="Direccion de la pagina"><img src="Direccion del Logo" title="Zipor" alt="Ziport Logo"/></a></div></div>
</
header>
</
body

a hora creas un texto con bloc de notas y pegas

Código:
*{margin:0;padding:0;}

body{
    background:url(https://i.imgur.com/Jn3CQjj.jpg) 50% 50% fixed;
}
#header{
     background: #000 url('https://i.imgur.com/EQ1EWhO.png') repeat-x;
    height:136px;
     box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
     -moz-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
}
#sub-img{
    width:300px; /* el ancho de tu logo */
    height:140px; /* el alto de tu logo */
    background: url(https://i.imgur.com/i2DQ8RJ.png) 50% 50% no-repeat;
    margin:-20px 0 0;
    position:absolute;
}

luego le das guardar y le pones de nombre style.css

en donde quieras guardarlo
luego de ello creas una carpeta llamada css y copias el style.css en la carpeta anteriormente mencionada
y lo subes a tu ftp

que genera esto esto genere una rápida optimizasion y facilidad a la hora de buscar el css
y evitar agregar en todas las paginas el mismo código
WWW
#8
Dark_Soul ya te ha dado una forma, la otra usando sólo CSS es creando un enlace dentro del div "sub-img" y con CSS mostrarlo como "bloque" (aunque algunos no les gusta llamarlo así) con la propiedad display:block.

Por sí solo no hara nada, o no se mostrará bien el enlace así que hay que asignarle un tamaño, en éste caso podría ser con width:100% para que ocupe todo el ancho de su contenedor (#sub-img) y height:100% para todo el alto.

Opcionalmente le puedes agregar un text-indent negativo para que oculte el texto (lo mueves a X cantidad a la izquierda).

Usando tu código como ejemplo Interesante

Código:
<!DOCTYPE html>
<html>
<head>

<style type="text/css" rel="stylesheet" media="all">
*{margin:0;padding:0;}

body{
    background:url(https://i.imgur.com/Jn3CQjj.jpg) 50% 50% fixed;
}
#header{
    background: #000 url('https://i.imgur.com/EQ1EWhO.png') repeat-x;
    height:136px;
    box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0 -4px 5px rgba(0, 0, 0, 0.7);

}
#sub-img{
    width:300px; /* el ancho de tu logo */
    height:140px; /* el alto de tu logo */
    background: url(https://i.imgur.com/i2DQ8RJ.png) 50% 50% no-repeat;
    margin:-20px 0 0;
    position:absolute;
}
#sub-img a{
    display:block; /* como "bloque", por default es "inline" */
    width:100%; /* ocupa todo el ancho de #sub-img */
    height:100%; /* ocupa todo el alto de #sub-img */
    /* para que no se muestre el texto "Ziport" */
    text-indent:-9999em;
}
</style>

<title>Imagen sobrepuesta</title>
</head>
<body>

<div id="header"><div id="sub-img"><a href="http://www.google.com/">Ziport</a></div></div>

</body>
</html>
WWW
#9
Tienes que utilizar position: fixed;


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Wiki sobre Genie Posits 15 752 04-02-2017, 01:07 AM
Último mensaje: Posits
  Solucionado: escribir en una imagen php firmas Sergio09 2 260 13-12-2016, 08:33 PM
Último mensaje: DarkMaster
  Solucionado: [ayuda] Cambio de cabecera automaticamente Sergio09 3 260 06-12-2016, 07:26 AM
Último mensaje: Sergio09
  [Duda] Opinión sobre Artisteer habacuc78 3 553 29-03-2016, 10:12 AM
Último mensaje: habacuc78
  [Duda] Ayuda para añadir nueva recaptcha de google fercol 9 704 13-12-2015, 02:31 PM
Último mensaje: fercol
  [Ayuda] Poner contraseña a paginas web habacuc78 10 583 22-04-2015, 10:38 AM
Último mensaje: Vicen
  Como poner 2 Div en la Misma Linea (Diseño Responsive) AngelKrak 2 1,076 13-02-2015, 08:01 AM
Último mensaje: Finer
  Utilizar un loading o imagen de carga con CSS torgar22 2 442 19-12-2014, 05:09 PM
Último mensaje: amplox
  Link online para obtener html de una imagen desde word u otra página canpios 0 363 17-12-2014, 10:29 PM
Último mensaje: canpios
  Script personalizable en PHP para subir una imagen al servidor torgar22 0 821 23-11-2014, 11:26 PM
Último mensaje: torgar22



Usuarios navegando en este tema: 1 invitado(s)