{"id":983,"date":"2020-08-14T16:47:19","date_gmt":"2020-08-14T19:47:19","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=983"},"modified":"2022-12-09T08:17:15","modified_gmt":"2022-12-09T11:17:15","slug":"como-colocar-um-fundo-de-imagem-em-uma-pagina-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/como-colocar-um-fundo-de-imagem-em-uma-pagina-html\/","title":{"rendered":"Como colocar um fundo de imagem em uma p\u00e1gina HTML"},"content":{"rendered":"

Hoje, vou ensinar a como colocar um fundo de imagem em uma p\u00e1gina HTML<\/p>\n

 <\/p>\n

Vou usar essa imagem de teste<\/p>\n

\"\"<\/p>\n

Vou mostrar 4 exemplos de como fica<\/p>\n

Um exemplo que se repete<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/08\/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Background Repeat<\/h2>\r\n\r\n<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Outro exemplo que se ajusta<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/08\/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed;  \r\n  background-size: cover;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Background Cover<\/h2>\r\n\r\n<p>Set the background-size property to \"cover\" and the background image will cover the entire element, in this case the body element.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
E um exemplo que ajusta com Cover<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/08\/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed;  \r\n  background-size: cover;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Background Cover<\/h2>\r\n\r\n<p>Set the background-size property to \"cover\" and the background image will cover the entire element, in this case the body element.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Veja com 100%<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/08\/como-colocar-um-fundo-de-imagem-em-uma-pagina-html.jpg');\r\n  background-repeat: no-repeat;\r\n  background-attachment: fixed; \r\n  background-size: 100% 100%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Background Stretch<\/h2>\r\n\r\n<p>Set the background-size property to \"100% 100%\" and the background image will be stretched to cover the entire element, in this case the body element.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n