css dos imágenes de fondo

Tipo de nuevo en css, pero tengo una imagen que quiero en la esquina superior izquierda y luego otra imagen que quiero repetir después de eso. Actualmente me cansé:css dos imágenes de fondo

CSS

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
    height: 200px; /*Height of top section*/ 
    color: White; 
    text-align:center 
} 

#topsection a{ 
    color: #FFFF80; 
} 

#topsection h1{ 
    margin: 0; 
    padding-top: 25px; 
    text-align:Left 
} 

#topsection h2{ 
    margin: 0; 
    padding-top: 0px; 
    text-align:Center 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>IG Indy Gamers</title> 
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />  
</head> 
<body> 
<div id="maincontainer"> 

<div id="topsection" > <div class="innertube"> 
    <h1>IG -Indy Gamers </h1> 
    <FONT style="BACKGROUND-COLOR: blue"><p align='right'><a href="#"> &nbspSignup</a> </font>/<a href='Login.html' id='LoginContent' >Login </a></p> 
    <ul id="list-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Reviews</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Forums</a></li> 
     <li><a href="#">Demo's</a></li> 
     <li><a href="#">Members</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

</div></div>

pero la segunda imagen sólo copias más de la primera. ¿Puedes sugerir otra forma de hacer esto? Escuché que usar capas puede hacerlo, pero todavía no sé nada de eso.

Fuente

2012-08-06 Glen Morse

Parece que CSS3 admite multiple background images; los especifica separados por comas:

background: url('banner1.jpg'), url('banner2.jpg'); 
background-position: left top, left top; 
background-repeat: no-repeat, repeat;

Juego con background-position hasta que hace lo que quiere.

IE < 9 no es compatible con esta característica.

Fuente

2012-08-06 00:29:41

Esto funcionó ¡Gracias! –

Esta Q también me ayudó a peinar el degradado con la imagen de fondo http://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image –

No lo sabía, gracias. –

Tendrá que crear 2 elementos que contengan: 1 para la imagen que se repite. Y un 2º para la imagen en la parte superior izquierda.

En otras palabras, algo a lo largo de las líneas de:

<div class="repeatingBgImage"> 
    <div class="otherBgImage"> 
    <!-- content --> 
    </div> 
</div>

CSS funciona en un modo bien, en cascada. Cualquier cosa que se declara puede y será sobrescrita por la siguiente línea en el estado, es decir,

.someClass { 
    color: yellow; 
    color: blue; 
}

El color final del texto será de color azul, no verde (amarillo + azul = verde).

Dada su muestra ...

#topsection{ 
    background: url('../images/bannerBGs.jpg'); 
    background-repeat:no-repeat; 
    background: url('../images/bannerBGl.jpg'); 
    background-repeat:repeat-x; 
}

... la imagen de fondo siempre será bannerBGl.jpg y repeat-x ya que es más baja en la declaración de la CSS, sobrescribiendo así la imagen BG anterior y repetir la declaración.

Fuente

2012-08-06 00:28:02

Si se dirige a nuevos navegadores, css3 ahora puede aplicar dos imágenes de fondo en un elemento. Es posible que desee comprobar éste hacia fuera

http://www.css3.info/preview/multiple-backgrounds/

Fuente

2012-08-06 00:29:59 index

que CSS

/*TOPSECTION */ 
#topsection{ 
background: url('../images/bannerBGs.jpg'); 
background-repeat:no-repeat; 
background: url('../images/bannerBGl.jpg'); 
background-repeat:repeat-x; 
height: 200px; /*Height of top section*/ 
color: White; 
text-align:center 
}

probar esto

background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg'); 
background-repeat: no-repeat, repeat-x; 
background-position: left top , 20px 30px; 
//background-position adjust second value which in px until you meet your requirment

Gracias!

Fuente

2013-07-23 08:36:16

Respuesta

Cuestiones relacionadas