Comunidad de diseño web y desarrollo en internet online

Dos fondos 50% imagen y 50% color

Citar            
MensajeEscrito el 02 Abr 2013 08:43 pm
Estoy maquetando la siguiente pagina

[url=http://www.expertosenaddendas.com/web/][/url]

pero como dice el titulo quisiera que el fondo de la pantalla fuera en 50% al ancho en diagonales y el otro 50% en fondo blanco le he intentado pero no me funciona , actualmente lo tengo asi

Código CSS :

html {
   height:100%;
   /*overflow-y:scroll;*/
}

body {
   background:url(../images/pattern-rayas.png) repeat top left;      
}


la maquetacion es asi



Alguien me podria echar la mano en como podria lograrlo

Saludos cordiales

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

chrome
Citar            
MensajeEscrito el 02 Abr 2013 11:40 pm
Cambie el codigo porque la imagen que tenia me salia como cuadricula y edite una imagen de 1663X200px

Código CSS :

body {
   background: url(../images/back.jpg) repeat scroll 0 0 transparent;   
}


Asi quedo pero claro edite la imagen a la mitad el blanco y no tuve el efecto deseado :(

Saludos

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

chrome
Citar            
MensajeEscrito el 05 Abr 2013 11:35 am
Mira a ver si te sirve este código...

Código CSS :

body{
   width: 50% ;
   background-image: url(bg_img.png) ;
   background-repeat: repeat ;
   background-attachment: fixed ;
   }
Con width: 50%, el fondo solo te ocupará la mitad de la ventana.

No necesitas una imagen tan grande para el fondo. Con un cuadrado de 5x5px con una línea diagonal, ya lo tienes.

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 05 Abr 2013 03:57 pm
sorry sr no me funciona :( saludos

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

chrome
Citar            
MensajeEscrito el 05 Abr 2013 09:11 pm
Cierto, es que no hay que aplicar el fondo al body, tiene que ser a un div fixed.

Te paso el código con el que hice la prueba. Te faltaría la imagen de fondo que se repite, es un png de 5 X 5 px.

Código HTML :

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>probando probando</title>
   <style>
      div#bg{
         width: 50% ;
         min-width: 400px ;
         height: 100% ;
         background-image: url(img.png) ;
         background-repeat: repeat ;
         background-attachment: fixed ;
         position: fixed ;
         top: 0 ;
         left: 0 ;
         z-index: -1 ;
         }
      #wrapper{
         width: 800px ;
         margin: 20px auto ;
         border: 2px dashed red ;
         background-color: #fff ;
         }
      p{
         padding-bottom: 20px ;
         font-family: helvetica, sans-serif ;
         font-size: 20px ;
         line-height: 25px ;
         }
   </style>
</head>

<body>

   <div id="wrapper">
      <p>Chanante ipsum dolor sit amet, nostrud eveniet churretoso pero qué pelazo ju-já. To sueltecico tempor a tope con la maquinaria bonico del tó horcate muchachada consectetur nuiiiii tontiploster. Cascoporro pepino en la mano ahí va qué chorrazo cobete gambitero, traeros tol jamón ayy qué gustico. Coconut bufonesco, chotera payacho freshquisimo melifluo ut bajonaaa. Sed adipisicing quis es de traca elit. Exercitation minim aliqua ullamco monetes ea nostrud eiusmod chiquititantantan saepe ea soooy crossoverr ut adipisicing. Et chachachá mamellas enim tunante elit ojete calor monguer Guaper artista one more time adipisicing.</p>
      <p>Tollina asobinao monguer Guaper es de traca. Asquerosito te viste de torero churretoso ea chotera pataliebre bufonesco. Veniam no te digo ná y te lo digo tó cabeza de viejo cuerpo de joven ahí va qué chorrazo. Ut elit ad pero qué pelazo minim cobete exercitation elit. Zanguango viejuno ex cartoniano gañán bajonaaa ea eiusmod muchachada.</p>
      <p>Horcate consectetur dolore interneeeer mamellas te viste de torero aliqua magna bonico del tó muchachada saepe tempor magna. Ut ullamco super ñoño labore es de traca agazapao ex fresquete. Con las rodillas in the guanter consectetur quis tempor elit nui páharo.</p>
      <p>Chanante ipsum dolor sit amet, ad enjuto mojamuto veniam zanguango chiquititantantan ex cabeza de viejo cuerpo de joven tontiploster. Regomello chavalada adipisicing tollina nianoniano monetes. Estoy fatal de lo mío a tope con la maquinaria exercitation ahí va qué chorrazo dolore. Páharo hueles avinagrado ut. Chotera labore minim labore. Eres un pirámidee bufonesco to sueltecico soooy crossoverr cascoporro nuiiiii ut ut, atiendee. Churretoso aliqua freshquisimo ut bizcoché ojete moreno ju-já forrondosco.</p>
      <p>Ojete moreno horcate ut artista churretoso ullamco vivo con tu madre en un castillo et freshquisimo bufonesco ut pero qué pelazo. Coconut eres un pirámidee tunante cascoporro cosica interneeeer, cobete enratonao páharo magna asquerosito hueles avinagrado. Aliqua es de traca tontiploster bonico del tó monetes veniam bocachoti. Viejuno tontaco muchachada con las rodillas in the guanter gatete zagal a tope con la maquinaria bizcoché saepe chachachá ad tempor minim sed. Nuiiiii ex sed ojete calor chiquititantantan no te digo ná y te lo digo tó melifluo payacho ex cartoniano ut chavalada, nisi. Dolore ullamco et to sueltecico piticli te viste de torero ayy qué gustico ju-já ad veniam.</p>
      <p>Nianoniano, asquerosito nuiiiii cabeza de viejo cuerpo de joven magna nui tunante ex pepinoninoni mangurrián payacho veniam ullamco. Nisi hueles avinagrado minim eiusmod ju-já veniam ullamco eres un pirámidee saepe a tope con la maquinaria tontiploster gambitero. Chotera bajonaaa labore ojete calor fresquete eiusmod con las rodillas in the guanter tontaco, artista bizcoché to sueltecico sed gañán. Páharo tempor zanguango ullamco ullamco gaticos enim enjuto mojamuto enim chiquititantantan ojete moreno veniam.</p>
      <p>Tollina asobinao monguer Guaper es de traca. Asquerosito te viste de torero churretoso ea chotera pataliebre bufonesco. Veniam no te digo ná y te lo digo tó cabeza de viejo cuerpo de joven ahí va qué chorrazo. Ut elit ad pero qué pelazo minim cobete exercitation elit. Zanguango viejuno ex cartoniano gañán bajonaaa ea eiusmod muchachada.</p>
      <p>Chanante ipsum dolor sit amet, nostrud eveniet churretoso pero qué pelazo ju-já. To sueltecico tempor a tope con la maquinaria bonico del tó horcate muchachada consectetur nuiiiii tontiploster. Cascoporro pepino en la mano ahí va qué chorrazo cobete gambitero, traeros tol jamón ayy qué gustico. Coconut bufonesco, chotera payacho freshquisimo melifluo ut bajonaaa. Sed adipisicing quis es de traca elit. Exercitation minim aliqua ullamco monetes ea nostrud eiusmod chiquititantantan saepe ea soooy crossoverr ut adipisicing. Et chachachá mamellas enim tunante elit ojete calor monguer Guaper artista one more time adipisicing.</p>
   </div>
   
   <div id="bg"></div>
   
</body>
</html>

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 05 Abr 2013 10:15 pm
Gracias señor ya quedo :D ya lo probe en diferentes monitores y se ve cool

[url=http://www.expertosenaddendas.com/web/nosotros.html][/url]

Saludos y buen fin :D

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

chrome
Citar            
MensajeEscrito el 06 Abr 2013 04:21 pm
Ya vi la web. Me alegro de que te funcione... :)

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 08 Abr 2013 05:52 pm
Yo hiba a decir:

Código :

background-size: 50%;


xD

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.