I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achieve the same effect without cutting off the image?
Here is the HTML code:
<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>Hi! I am learning how to create
my own web page! I have a strong fondness for
blueberry muffins and enjoy taking strolls along
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit" href="#">
</body>
And here is the CSS code:
body {
text-align:center;
background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
background-size: cover;
color:#fff;
font-family: Helvetica;
}
p {
font-size: 24px;
}
input {
border: 0;
padding: 12px;
font-size: 18px;
}
input[type="submit"] {
background: limegreen;
color: black;
}