Sobrepor reprodutor em imagem de forma efetiva

Elpadrotte · 07/09/2013

Bueno es sencillo
Quiero lograr lo siguiente
Que en una imagen sobreponer el codigo del reproductor logrando un efecto similar a este.

checar donde esta la tv y fijense que tiene el efecto se una sala pero en medio tiene el repro y detras la imagen de la tv.}algo asi

Si no me equivo es una especie de css o algun mapeo de la imagen que se yo. Ojala me puedan hechar una liana.
Si no es mucho pedir tambien quiero saber como poner objetos sobre una imagen ya sea un link algun video,un reproductor de radio etc.
En pocas palabra es que la imagen quede atras y encima las cosas que quiera
De antemano les agradesco su ayda

Sent from my BlackBerry 8520 using Tapatalk

victorvu · 07/09/2013

No me carga la pagina que pusiste

Elpadrotte · 08/09/2013

victorvu disse:
No me carga la pagina que pusiste

listo link corregido espero lo cheques y me heches una mano 🙂

Franyer Rivas · 08/09/2013

no se mucho de diseño pero creo que simplemente es crear una imagen como fondo y con ayuda de css alinear la div del reproductor exactamente al centro del área vacía de la imagen de fondo
fijate que todo es una imagen
imagen 1

imagen 2

algun diseñador te puede ayudar con eso

el css

HTML:

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=contenidobacktv]#contenidobacktv[/URL] {
	border-style: none;
	position: absolute;
	margin: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 544px;
	z-index: 0;
	background-color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=20C154]#20C154[/URL] ;
}
[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=contenidobacktv]#contenidobacktv[/URL] 100{
	border-style: none;
	position: absolute;
	margin: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 544px;
	z-index: 0;
}
[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=imagenbacktv]#imagenbacktv[/URL] {
	border-style: none;
	position: absolute;
	background-color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=2cbe59]#2cbe59[/URL] ;
	margin: 0px;
	left: 50%;
	top: 0px;
	margin-left: -680px;
	width: 1249px;
	height: 544px;
	z-index: 0;
}

el html

HTML:

<div id="contenidoTV" class="">
<div id="mueble"><img src="img/contenidos/tv/img/mesa.png" alt="mesaTV" height="160" width="797"></div>
<div id="backTV"><img src="img/contenidos/tv/img/tv.png" alt="backTV" height="380" width="660"><div id="videoHD"><iframe src="http://player.vimeo.com/video/46112940" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="324" width="607"></iframe></div></div>
</div>

claro no es cuestión de copiar y pegar, hay que hacer ajustes que para que quede bien alineado en el lugar donde lo usaras

Sobrepor reprodutor em imagem de forma efetiva

Elpadrotte

victorvu

Elpadrotte

Franyer Rivas