Pitanje: kako postaviti pozadinsku sliku sa iseckom slike?
Resenje: svojstva background i background-repeat.
Primer:
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>Pozadinska slika sa iseckom slike</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Pozadinska slika sa iseckom slike</h1>
</body>
</html>
CSS kod
body {
background: url("images/isecak11.png");
background-repeat: repeat-x;
margin: 10px;
font-family: Georgia, Arial, sans-serif;
}
Rezultat:
Primer 2:
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>Pozadinska slika sa iseckom slike 2</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<h1>Pozadinska slika sa iseckom slike 2</h1>
</body>
</html>
CSS kod
body {
background: url("images/isecak22.png")
repeat-y;
margin-left: 160px;
font-family: Georgia, Arial, sans-serif;
}
Rezultat:
Question: how to set background image with slice image?
Solution: properties background and background-repeat.
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Background image with slice image</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Background image with slice image</h1>
</body>
</html>
CSS code
body {
background: url("images/slice11.png");
background-repeat: repeat-x;
margin: 10px;
font-family: Georgia, Arial, sans-serif;
}
Result:
Example 2:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Background image with slice image 2</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<h1>Background image with slice image 2</h1>
</body>
</html>
CSS code
body {
background:url("images/slice22.png")
repeat-y;
margin-left: 160px;
font-family: Georgia, Arial, sans-serif;
}
Result:
Resenje: svojstva background i background-repeat.
Primer:
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>Pozadinska slika sa iseckom slike</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Pozadinska slika sa iseckom slike</h1>
</body>
</html>
CSS kod
body {
background: url("images/isecak11.png");
background-repeat: repeat-x;
margin: 10px;
font-family: Georgia, Arial, sans-serif;
}
Rezultat:
Primer 2:
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>Pozadinska slika sa iseckom slike 2</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<h1>Pozadinska slika sa iseckom slike 2</h1>
</body>
</html>
CSS kod
body {
background: url("images/isecak22.png")
repeat-y;
margin-left: 160px;
font-family: Georgia, Arial, sans-serif;
}
Rezultat:
Question: how to set background image with slice image?
Solution: properties background and background-repeat.
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Background image with slice image</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Background image with slice image</h1>
</body>
</html>
CSS code
body {
background: url("images/slice11.png");
background-repeat: repeat-x;
margin: 10px;
font-family: Georgia, Arial, sans-serif;
}
Result:
Example 2:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Background image with slice image 2</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<h1>Background image with slice image 2</h1>
</body>
</html>
CSS code
body {
background:url("images/slice22.png")
repeat-y;
margin-left: 160px;
font-family: Georgia, Arial, sans-serif;
}
Result:
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.