imagem de fundo

bgenistretti · bgenistretti · commit 64ae4aef4d7c · 2024-09-03T00:56:17.000-03:00
diff --git a/exercicios/ex022/fundo001.html b/exercicios/ex022/fundo001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teste de Imagem de Fundo</title>
+    <style>
+
+        body {
+            background-image: url('imagens/wallpaper001.jpg');
+        }
+
+        div.quadrado {
+            display: inline-block;
+            border: 2px solid black;
+            border-radius: 10px;
+            background-color: lightgray;
+            width: 300px;
+            height: 300px;
+        }
+
+        div#q1 {
+            background-color: skyblue;
+        }
+
+        div#q2 {
+            background-image: linear-gradient(to bottom, yellow, red);
+        }
+
+        div#q3 {
+            background-image: url('imagens/pattern001.png');
+        }
+    </style>
+</head>
+<body>
+    <div class="quadrado" id="q1">
+
+    </div>
+
+    <div class="quadrado" id="q2">
+
+    </div>
+
+    <div class="quadrado" id="q3">
+
+    </div>
+</body>
+</html>
diff --git a/exercicios/ex022/fundo002.html b/exercicios/ex022/fundo002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Personalização dos fundos</title>
+    <style>
+        body {
+            background-image: url('imagens/pattern001.png');
+            background-size: 100px 100px;
+            background-repeat: repeat-y;
+            /*
+            background-repeat: repeat-x; 
+            background-repeat: repeat-y;
+            background-repeat: no-repeat;
+            */
+        }
+    </style>
+</head>
+<body>
+    
+</body>
+</html>
