Foros del Web » Creando para Internet » CSS »

Imagen background se ve con zoom

Estas en el tema de Imagen background se ve con zoom en el foro de CSS en Foros del Web. Hola amigos, Estoy utilizando un child theme de Genesis llamado Minimun pro y tengo el problema que la imagen principal de la home se ve ...
  #1 (permalink)  
Antiguo 25/04/2015, 04:01
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Imagen background se ve con zoom

Hola amigos,

Estoy utilizando un child theme de Genesis llamado Minimun pro y tengo el problema que la imagen principal de la home se ve con zoom, mostrando solo una parte de la imagen. He preguntado al soporte de studiopress (los creadores de Genesis y este child theme) pero no me dan solución.

¿Creen que podría arreglarse mediante CSS?


Mi web no está disponible ya que como las estoy construyendo, está alojada en una plataforma de pruebas de mi servidor de hosting.

Espero su ayuda, muchas gracias!

Última edición por pzin; 25/04/2015 a las 08:10 Razón: Desespamear
  #2 (permalink)  
Antiguo 25/04/2015, 06:22
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

necesitamos ver codigo o pagina para poder ayudarte amigo ;) y si puedes manda cap de tu error y k kieres exactamente ;)
  #3 (permalink)  
Antiguo 25/04/2015, 06:59
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por AngelKrak Ver Mensaje
necesitamos ver codigo o pagina para poder ayudarte amigo ;) y si puedes manda cap de tu error y k kieres exactamente ;)
Hola AngelKrak

Error no hay, simplemente se muestra la imagen parcialmente (en lugar de en su totalidad) y da igual el tamaño de la imagen, he probado muchos tamaños y muchas imágenes y siempre hace un efecto zoom sobre ellas.

Como la web está sin acabar en una plataforma de pruebas no se como mostrar pantallazos. ¿Hay alguna solución a esto? Siempre tengo este problema en todos los foros y no querría que estuviera visible la página todavía para evitar que google la indexe y esas cosas.
  #4 (permalink)  
Antiguo 25/04/2015, 08:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Imagen background se ve con zoom

Bienvenido al foro.

Pon el código como dice Angel. No pretendas que adivinemos qué código tiene tu web.

Que no esté accesible no significa que no puedas dejar por aquí el código HTML/CSS (nada de PHP) del problema.
__________________
(:
  #5 (permalink)  
Antiguo 25/04/2015, 08:24
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

necesitamos ver tu codigo(100% Importante y Necesario) para poder ayudarte amigo >_< para tomar foto puedes hacerlo de varias formas:
1.- Aprieta el Boton Impr pant Pet Sis de tu Teclado, Luego vas a Paint y lo Guardas.
2.- Usa una Extencion de Chrome para tomar fotos, la que yo uso es Nimbus Screenshot.
3.- Bájate el Programa Capture Wiz Pro y con ese toma la foto.

Última edición por pzin; 25/04/2015 a las 08:25 Razón: borrar enlace autobombo
  #6 (permalink)  
Antiguo 25/04/2015, 08:25
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

El problema es que no se bien que parte del código es. Os dejo un extracto y me decís si es válido.

Muchas gracias

Código CSS:
Ver original
  1. /* Site Containers
  2. --------------------------------------------- */
  3.  
  4. .home-featured {
  5.     border-bottom: 5px solid #f5f5f5;
  6.     margin-bottom: 60px;
  7.     padding: 40px 0;
  8. }
  9.  
  10. .home-featured li {
  11.     list-style-type: none;
  12. }
  13.  
  14. .home-featured .widget {
  15.     padding: 0 20px;
  16. }
  17.  
  18. .home-featured p:last-child {
  19.     padding: 0 0 24px;
  20. }
  21.  
  22. .home-featured-1,
  23. .home-featured-2,
  24. .home-featured-3,
  25. .home-featured-4 {
  26.     float: left;
  27.     text-align: center;
  28.     width: 25%;
  29. }
  30.  
  31. .home-featured .simple-social-icons ul li a {
  32.     padding: 40px !important;
  33. }
  34.  
  35. .home-featured .simple-social-icons ul li {
  36.     margin: 0 0 30px !important;
  37. }
  38.  
  39. .site-tagline {
  40.     background-color: #f5f5f5;
  41.     border-bottom: 1px solid #eee;
  42.     margin-top: 60px;
  43.     padding: 40px 0;
  44. }
  45.  
  46. .site-tagline p {
  47.     margin: 0;
  48. }
  49.  
  50. .site-tagline-left {
  51.     float: left;
  52.     width: 50%;
  53. }
  54.  
  55. .site-tagline-right {
  56.     float: right;
  57.     text-align: right;
  58.     width:100%;
  59.    
  60. }
  61.  
  62. .minimum .site-tagline {
  63.     margin-top: 600px;
  64. }
  65.  
  66. a.cta-button {
  67.     background-color: #333;
  68.     border-radius: 5px;
  69.     color: #fff;
  70.     display: inline-block;
  71.     font-size: 18px;
  72.     font-weight: 300;
  73.     line-height: 1;
  74.     padding: 15px 20px;
  75. }
  76.  
  77. a.cta-button:hover {
  78.     background-color: #0ebfe9;
  79. }

Última edición por pzin; 25/04/2015 a las 08:26 Razón: formato código
  #7 (permalink)  
Antiguo 25/04/2015, 08:29
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

Las fotos no es problema, utilizo MAC y con combinación de teclas saco pantallazo, lo que no se es enviarlas al foro, ya que el botón agregar foto es para introducir un link que no funcionaria al estar la foto en mi escritorio....
  #8 (permalink)  
Antiguo 25/04/2015, 08:53
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Imagen background se ve con zoom

Puedes subirlas a un hosting de imágenes gratis como Imgur
  #9 (permalink)  
Antiguo 25/04/2015, 09:09
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

Muchas gracias a todos por vuestras aportaciones!

Pongo 2 pantallazos. El primero de como se muestra la imagen

y el segundo con la imagen real.





Respecto al código ya me diréis si es el fragmento correcto... es que es mi primer día de CSS y lo estoy pasando fatal!
  #10 (permalink)  
Antiguo 25/04/2015, 10:19
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Imagen background se ve con zoom

Más que zoom parece que se superponen los menús.
  #11 (permalink)  
Antiguo 25/04/2015, 10:57
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

pzin como asi que enlace autobombo -_- solo es un host de archivos -_- como Imgur -_- y prueba a ponerle un height: 100% >_<
  #12 (permalink)  
Antiguo 25/04/2015, 11:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por AngelKrak Ver Mensaje
pzin como asi que enlace autobombo -_- solo es un host de archivos -_- como Imgur
La diferencia con imgur es que imgur no es tuyo; puedes leerte el punto 2.1 de las políticas del foro.
__________________
(:
  #13 (permalink)  
Antiguo 25/04/2015, 12:20
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

ahi dice con clara intención o propósito publicitario, compra/venta, yo solo lo pongo para k suban las imagenes si no conocen otros hosts ._. pero bueno esta bien, como quieran jejeje xD
  #14 (permalink)  
Antiguo 25/04/2015, 12:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por AngelKrak Ver Mensaje
ahi dice con clara intención o propósito publicitario, compra/venta, yo solo lo pongo para k suban las imagenes si no conocen otros hosts ._. pero bueno esta bien, como quieran jejeje xD
Lo de siempre: pon más atención al leer.
__________________
(:
  #15 (permalink)  
Antiguo 25/04/2015, 14:38
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Imagen background se ve con zoom

No es "zoom", simplemente es que:

1) Tu imagen no tiene posición relativa, por lo que el menú superior se solapa/superpone.
2) El contenedor de la imagen no tiene la suficiente altura para mostrar todo el contenido.
__________________
¿Te sirvió la respuesta? Deja un +1
  #16 (permalink)  
Antiguo 26/04/2015, 03:37
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por PHPeros Ver Mensaje
Más que zoom parece que se superponen los menús.
Ante todo gracias por tu respuesta. Los menus no se superponen, puede parecerlo quizá en la foto pero no, al hacer scrollilng se nota que no es ese el problema.
  #17 (permalink)  
Antiguo 26/04/2015, 03:42
Avatar de Jairba  
Fecha de Ingreso: abril-2015
Mensajes: 29
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por AngelKrak Ver Mensaje
pzin como asi que enlace autobombo -_- solo es un host de archivos -_- como Imgur -_- y prueba a ponerle un height: 100% >_<
Hola AngelKrak!

¿puedes decirme donde colocar el height?? Estoy probando pero o no funciona o no atino en el sitio. Lo siento, pero es mi primera toma de contacto con el CSS.
  #18 (permalink)  
Antiguo 26/04/2015, 03:56
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Imagen background se ve con zoom

He intentado acceder a la web pero me pide login. Así no puedo/podemos ver el código ni ayudarte.
__________________
¿Te sirvió la respuesta? Deja un +1
  #19 (permalink)  
Antiguo 26/04/2015, 11:37
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

amigo, tu pagina tiene efecto parallax si no me equivoco :/



Codigo de backstretch.js?ver=1.0.0:
Código Javascript:
Ver original
  1. /*! Backstretch - v2.0.4 - 2013-06-19
  2. * http://srobbin.com/jquery-plugins/backstretch/
  3. * Copyright (c) 2013 Scott Robbin; Licensed MIT */
  4. (function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

Codigo de backstretch-set.js?ver=1.0.0:
Código jQuery:
Ver original
  1. jQuery(document).ready(function($) {
  2.     $("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
  3. });


Última edición por AngelKrak; 26/04/2015 a las 11:45 Razón: Imagen GIF
  #20 (permalink)  
Antiguo 26/04/2015, 13:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Imagen background se ve con zoom

Te equivocas Angel. El paralaje es otra cosa.

Si quieres conseguir ese efecto, no hace falta tanta parafernalia, basta con usar una imagen de fondo y fijar la posición del fondo.

Y so quieres resolver el problema de que la imagen no se muestra completamente, entonces tendrás que decidir si quieres que la parte horizontal o vertical se queda en blanco. Otra solución sería deformar la imagen. ¿Pensaste en eso? Es un dilema de abarcamiento físico.
__________________
(:
  #21 (permalink)  
Antiguo 26/04/2015, 14:44
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Imagen background se ve con zoom

es un parecido esa pagina a esta y ahi dice Parallax jajaja xD pero bueno, el chiste es que la imagen se va ocultando mediante haces scroll(en la pagina del ayudado"Jairba")
http://urielhdz.github.io/parallax/

pero me encanta el efecto que tiene esta pagina *o*
http://www.bagigia.com/

fundamento de Parallax:
Cita:
Construir un sitio así requiere de más de un tutorial, pero sobre todo de trabajar alrededor de un concepto en el que se desenvuelva el efecto. Como podrás notar, todo gira alrededor del scroll que va haciendo el usuario sobre la página.

La palabra Parallax, como tal, nos da ya una descripción de lo que es el efecto, puede traducirse al español como alteración, y es que queda claro que la velocidad, el movimiento o la posición de los elementos se ve alterada para realizar el efecto.

http://html5facil.com/tutoriales/fun...ecto-parallax/
  #22 (permalink)  
Antiguo 26/04/2015, 14:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Imagen background se ve con zoom

Al español se traduce como paralaje. Si lees bien, verás que hace falta un objeto que haga de referencia entre el observador y el fondo.

Pero bueno, la mayoría de las webs que ves por ahí que dicen tener ese efecto realmente no lo tienen y, mucha gente que dice que lo hace, no lo hace porque no tiene ni idea de lo que es realmente —aunque crean que sí.

Al menos hay sitios que lo hacen bien.

Y bueno… No hay que tener ninguna cátedra para poner algo en Github; también hay mucha basura y mucho tarado por ahí.

__________________
(:
  #23 (permalink)  
Antiguo 26/04/2015, 22:17
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Imagen background se ve con zoom

Cita:
Iniciado por pzin Ver Mensaje
Al menos hay sitios que lo hacen bien.
Es genial, muy bonito. Eso sí está bien hecho.
__________________
¿Te sirvió la respuesta? Deja un +1

Etiquetas: background
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:21.