[SOLUCIONADO] Duda con una imagen

[ruizinho]

Hola, les explico lo que quiero hacer haber si me dan una pista de por ddonde tirar.
Quisiera poner esta foto:

en mi pagina web de manera que el contenedor donde este la foto sea un poco mas pequeño para que de la foto con los dos triangulitos negros de abajo de la sensacion de que envuelve al container de la pagina.

Nose si me aveis entendido, el problema que tengo esque yo siempre que "diseño una pagina web" voy alojando div dentro de otros div y nunca el de adentro puede ser mas grande que el de fuera y pues no se como hacer para que la foto se mas grande que el div.

Gracias y espero respuestas.

Un saludo

[pzin]

Esto puedes hacerlo con CSS, incluso los triángulos puedes hacerlo usando sólo código.

Usando posiciones relativas y absolutas, y con pseudo-elementos te puede quedar algo bastante limpio de la siguiente forma:

Código HTML:

<div></div>
 

Eso sería el HTML, no hace falta más.

Código CSS:

div {
  position: relative;
  width: 960px;
  height: 200px;
  background-image: radial-gradient(center, ellipse cover, #aed1ff 0%, #6db3f2 80%);
}
 
div:before, div:after {
  position: absolute;
  bottom: -20px;
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid darkblue;
}
 
div:before {
  border-left: 20px solid transparent;
}
 
div:after {
  right: 0;
  border-right: 20px solid transparent;
}
 

Puse un ejemplo por aquí, aunque en vez de CSS usé Sass/Compass.

Para el color de fondo, sería bueno sacarlo de Colorzilla para que te genere una solución que soporten todos los navegadores.

[ruizinho]

Perdon por la tardanza!!!!!! Esque he estado super liado, muchisimas gracias por tu respuesta ya he conseguido hacer este diseño.

un abrazoo!!!