Rounded corners on background-image CSS
Question
I'm a total noob so sorry about this question. I'm trying to get an image that I have set behind my h1 text to have rounded softer corners so it isn't just a harsh rectangle. I'm simply practicing the very few things I know about html and css by making a mock restaurant page, and I didn't learn how to do this but I've been banging my head into the wall trying to figure it out for a couple of hours now. I can get the image to round-corners with border-radius: 50px; but only when it's below the text. I'm writing my code in notepad++ if it matters and I'm not sure if it has something to do with the resolution or size of the picture. I also tried putting it in a div after seeing some suggestions on here but no luck with that. Here's my code and some screenshots:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Joe's Pizza Downtown GR </title>
<link href="https://fonts.googleapis.com/css?family=Lobster" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="header">
<h1> Joe's Pizza </h1>
</div>
</body>
</html>
CSS:
h1 {
font-family: Lobster;
color: Orange;
font-size: 64px;
padding: 40px;
text-align: center;
}
body {
background-image: url("cool-background.jpg");
}
.header {
background-image: url("pizza-pepperoni.jpg");
height: 400px;
background-position: center center;
border-radius: 50px;
background-repeat: no-repeat;
margin: 20px;
}
Screenshot of rectangle behind text
Thanks anyone that can help :)
EDIT:Fixed and final solution thanks!
1 answers
solution1
5 ACCPTED 2017-03-27 02:54:42
Looks like it's because the background image isn't expanding to the far corners of the element it's assigned to, so the border-radius isn't clipping the image. You likely just need to modify the background-size property, or potentially use a different image. I'm using background-size: cover here, which will cause the image to stretch to fill the element without distorting the aspect ratio.
h1 { font-family: Lobster; color: Orange; font-size: 64px; padding: 40px; text-align: center; } .header { background-image: url("https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg"); height: 400px; background-position: center center; background-size: cover; border-radius: 50px; background-repeat: no-repeat; margin: 20px; }
<div class="header"> <h1> Joe's Pizza </h1> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.