{"id":53,"date":"2010-04-07T09:23:30","date_gmt":"2010-04-07T12:23:30","guid":{"rendered":"http:\/\/www.l9web.com.br\/blog\/?p=53"},"modified":"2020-01-16T21:32:56","modified_gmt":"2020-01-17T00:32:56","slug":"background-do-site-de-acordo-com-a-resolucao-de-tela","status":"publish","type":"post","link":"https:\/\/www.l9web.com.br\/blog\/?p=53","title":{"rendered":"Background do site de acordo com a resolu\u00e7\u00e3o de tela"},"content":{"rendered":"<p>E a\u00ed pessoal hoje vou postar como colocar uma imagem de fundo no site de acordo com a resolu\u00e7\u00e3o do monitor.<\/p>\n<ul>\n<li>Isso \u00e9 muito \u00fatil quando o imagem de fundo precisa aparecer bem e ter um bom destaque.<\/li>\n<li>Sem esse m\u00e9todo a foto de fundo ficaria cortada e fora do lugar que desejamos.<\/li>\n<\/ul>\n<p>1 \u2013 Vamos l\u00e1, primeiro vamos criar as imagens que precisamos, no caso eu criei umas 10 imagens com as resolu\u00e7\u00f5es que eu precisava.<\/p>\n<p><span style=\"font-size: inherit;\">page_bg800.jpg, page_bg1024.jpg,\u2026,page_bg1440.jpg,\u2026,page_bg1680.jpg e assim por diante.<\/span><\/p>\n<p>2 \u2013 Depois disso implementamos uma fun\u00e7\u00e3o\u00a0JAVASCRIPT\u00a0que coloca um estilo para o fundo (coloca o fundo propriamente dito). Segue abaixo a fun\u00e7\u00e3o que fica no index.php<\/p>\n<p>\/*Fun\u00e7\u00e3o que detecta a resolu\u00e7\u00e3o de tela que voc\u00ea est\u00e1 usando e coloca o plano de fundo*\/<\/p>\n<p>function resolucao()<br \/>\n{<br \/>\nif (screen.width == \u201c640\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg800.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c800\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg800.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c1152\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg1152.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c1024\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg1024.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c1280\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg1280.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c1440\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg1440.jpg) no-repeat\u201d;<br \/>\n}<br \/>\nif (screen.width == \u201c1680\u201d){<br \/>\ndocument.body.style.background=\u201d#fafafa url(templates\/mariabenta\/images\/page_bg1600.jpg) no-repeat\u201d;<\/p>\n<p>\/*Fim da Fun\u00e7\u00e3o que detecta a resolu\u00e7\u00e3o de tela que voc\u00ea est\u00e1 usando e coloca o plano de fundo*\/<\/p>\n<p>3 \u2013 Depois disso vem o \u201cpulo do gato\u201d : adicionamos uma chamada para a fun\u00e7\u00e3o\u00a0resolucao()\u00a0no evento\u00a0onload=\u201d\u201d\u00a0do body do\u00a0seu index.php:<\/p>\n<p>&lt;html&gt;<\/p>\n<p>&lt;head&gt;&lt;\/head&gt;<\/p>\n<p>&lt;body id=\u201dpage_bg\u201d onload = \u201cresolucao()\u201d&gt;<\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<p>4 \u2013 Se tiver alguns arquivo css associado ao seu documento lembre de remover a propriedade background do mesmo. No caso meu arquivo de css \u00e9 o template.css e eu removi essa linha:<\/p>\n<p>#page_bg {<br \/>\nremover \u2013&gt;[color=#FF0000]background: #fafafa url(..\/images\/page_bg.jpg) no-repeat;\u00a0 \u00a0[\/color]<br \/>\n}<\/p>\n<p>O resultado voc\u00ea confere aqui: http:\/\/www.mmariabenta.com.br<\/p>\n<p>Altere sua resolu\u00e7\u00e3o e ao carregar a p\u00e1gina voc\u00ea ver\u00e1 que o background do site ser\u00e1 recarregado dinamicamente de acordo com a mesma (resolu\u00e7\u00e3o).<\/p>\n<p>\u00c9 isso a\u00ed pessoal! Abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>E a\u00ed pessoal hoje vou postar como colocar uma imagem de fundo no site de acordo com a resolu\u00e7\u00e3o do monitor. Isso \u00e9 muito \u00fatil quando o imagem de fundo precisa aparecer bem e ter um bom destaque. Sem esse&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-php-e-javascript"],"_links":{"self":[{"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/53"}],"collection":[{"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":2,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/53\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.l9web.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}