Today I will share how to create repeat backgrounds and use them in your website. It will save some space on your web hosting and also loads the page quickly.
This is the original image:
Crop the above image like this:
The final image will be this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
body {
background: url(hearts.jpg) repeat;
}
.wrapper {
background: #5a5a5a;
width: 600px;
height: 300px;
text-align: center;
display: table;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
box-shadow: 5px 6px 20px rgba(0, 0, 0, 0.9);
}
.inner-wrapper {
display: table-cell;
vertical-align: middle;
position: relative;
border-radius: 5px;
}
input[type="text"] {
border: 0;
outline: none;
padding: 7px;
color: #708090;
font-size: 17px;
letter-spacing: 1px;
}
button[type="submit"] {
padding: 10px;
border: 0;
outline: none;
background-color: #4a4949;
color: #fff;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #5d6b79;
}
button[type="submit"]:active {
background-color: #3b4650;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner-wrapper">
<form method="post">
<input type="text" placeholder="Search your favourite food...">
<button type="submit">
<span class="fa fa-search"></span>
</button>
</form>
</div>
</div>
</body>
</html>
Output:
No comments:
Post a Comment