{"id":260,"date":"2014-11-27T19:20:08","date_gmt":"2014-11-27T19:23:55","guid":{"rendered":"https:\/\/f1398css3.jpg"},"modified":"2015-07-16T15:25:05","modified_gmt":"2015-07-16T21:25:05","slug":"como-hacer-que-la-imagen-de-fondo-se-adapte-al-tamano-de-la-pantalla-con-css3","status":"publish","type":"post","link":"https:\/\/emanuelpaxtian.com\/blog\/como-hacer-que-la-imagen-de-fondo-se-adapte-al-tamano-de-la-pantalla-con-css3\/","title":{"rendered":"Como hacer que la imagen de fondo se adapte al tama\u00f1o de la pantalla con CSS3"},"content":{"rendered":"<p>Puede ser interesante para nuestro dise\u00f1o web y sobretodo si queremos hacer p\u00e1ginas multiplataforma que se adapten al tama\u00f1o de pantalla de los distintos dispositivos (dise\u00f1o web adaptativo) poner una imagen de fondo que se adapte al tama\u00f1o y resoluci\u00f3n de la pantalla del usuario.<\/p>\n<p>La propiedad \u201cbackground-size:\u00a0cover\u201d nos permite aumentar el tama\u00f1o de la imagen de fondo, en lugar de que nos muestre la imagen varias veces.<\/p>\n<p>Para ello, solo debemos utilizar la siguiente instrucci\u00f3n CSS:<\/p>\n<pre class=\"brush: css\">body{\r\nbackground:\u00a0url(imagen.png)\u00a0no-repeat\u00a0center\u00a0center\u00a0fixed;\r\n-webkit-background-size:\u00a0cover;\r\n-moz-background-size:\u00a0cover;\r\n-o-background-size:\u00a0cover;\r\nbackground-size:\u00a0cover;\r\n}\r\n<\/pre>\n<p>Con estos par\u00e1metros la funci\u00f3n ser\u00e1 v\u00e1lida para todos los navegadores (<a title=\"compatibilidad entre navegadores, cross browsing\" href=\"http:\/\/dissenyaweb.com\/blog\/diseno_web\/category\/diseno_web_general\/compatibilidad-navegadores\/\" target=\"_blank\">Cross-browsing<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Puede ser interesante para nuestro dise\u00f1o web y sobretodo si queremos hacer p\u00e1ginas multiplataforma que se adapten al tama\u00f1o de pantalla de los distintos dispositivos (dise\u00f1o web adaptativo) poner una&hellip;<\/p>\n","protected":false},"author":1,"featured_media":714,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":0,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media\/714"}],"wp:attachment":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}