3 divs. ¿uno para cada background?

[IMAC/]

Buenas

Intento hacer un simple rectángulo con esquinas redondeadas y un fondo y bueno, me pregunto como se hará en css.
Yo en html lo hubiera hecho con una tabla y 3 columnas. Un background por cada columna.

En css unicamente puede haber un background por cada div, ¿no?

¿Si es así, tendría que anidar 3 divs así a lo tonto modorro ?

Dejo aquí el ejemplo de lo que he hecho, no se si estará bien, espero que me digáis al menos si no va mal encaminado:

Ver ejemplo

Gracias.

[JavierB]

Hola IMAC/

Aquí tienes varios enlaces sobre esquinas redondeadas:

http://juglar103.iespana.es/wordpress/

Saludos,

[hCanté]

Hola!

Un ejemplo con CSS, tu div con esquinas redondeadas digamos que será round-corner:

Código HTML:

 <div id="round-corner"> Texto de ejemplo </div> 

Y el css quedaría algo así:

Código HTML:

 div#round-corner { width:400px; height:300px; -moz-border-radius:8px; -webkit-border-radius:8px; background:#CCC }

El -moz-border-radius solo lo interpreta Firefox y el -webkit... es para Safari, no se va a ver en IE en un futuro cercano pero esas son de las cosas con las que hay que aprender a vivir...

Saludos!

Update: con el enlace que te dió JavierB ya tienes para entretenerte un rato :)

[safe]

Si el contenedor en cuestion puede crecer a lo ancho o a lo alto puedes hacerlo solo con dos elementos.
De todos modos no necesariamente tienen que ser 3 divs.
Por ejemplo si lo que quieres hacer es un bloque con un titulo y un texto, puedes lograr el efecto con el siguiente HTML

<div>
<h1></h1>
<p></p>
</div>

Y, si por ejemplo solo va a crecer para abajo, por CSS le pones la imagen que forma el borde de arriba como fondo del H1, el border de abajo al P y el que se repite a lo largo al DIV.
Recuerda que todos los elementos HTMLS son modificables por CSS no solo los divs.
No se si me explico bien. Saludos, FS

[IMAC/]

Gracias por la información aunque, por lo que he visto, tampoco lo hice tan mal ¿no?

Por lo visto no hay modo de ahorrarse al menos 3 estilos, uno para cada imagen de fondo, a no ser que hagas algo un poco raro y enrevesado.

[Mikmoro]

Iniciado por safe

Si el contenedor en cuestion puede crecer a lo ancho o a lo alto puedes hacerlo solo con dos elementos.

E incluso una sola imagen con esos dos elementos.

[IMAC/]

Iniciado por Mikmoro

E incluso una sola imagen con esos dos elementos.

¿A qué te refieres?

Por ahora lo he hecho más o menos como me ha indicado safe:

Código HTML:

<style>
.headerNews1, .headerNews1 h1{
	width: 100%;
	height: 56px;
}

.headerNews1{
	background: url("../imgs/headerNewsL.gif") no-repeat left;
}

.headerNews1 h1{
	background: url("../imgs/headerNewsR.gif") no-repeat right;
}


.headerNews{
	background: url("../imgs/bgHeaderNews.gif") repeat-x;
}
</style>

<div class="headerNews">
	<div class="headerNews1">
		<h1>
		</h1>
	</div>
</div> 

[Mikmoro]

Según lo que vayas a hacer, puedes hacerlo con una sola imagen:

http://www.araudi.net/forosdelweb/cajaroja.html

Aquí otro ejemplo de una sola imagen que puede crecer en las 2 dimensiones