How to make the background not wrap around the paragraph tag
Question
For my new website, I'm trying to make the background stay as the background, and to make the paragraph tag sit by itself. I don't want for the background to make different rectangles with the background inside them, I want the background to be one whole thing. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=decice-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Kulim+Park&display=swap" rel="stylesheet">
<title>zippernet</title>
<style>
body {
background: rgb(2,0,36);
background: linear-gradient(10deg, rgba(2,0,36,1) 0%, rgba(80,80,255,1) 100%, rgba(0,212,255,1) 100%);
}
p, h1, h2, h3, h4, h5, h6 {
font-family: 'Kulim Park', sans-serif;
color: white;
}
.rotated-heading {
font-size: 50px;
float: right;
}
</style>
</head>
<body>
<p class="rotated-heading">Welcome to zippernet!</p>
</body>
</html>
Here's the website URL: https://zippernet.000webhostapp.com/index.html
1 answers
solution1
0 ACCPTED 2020-01-03 20:55:45
I interpret your question to mean that you want the gradient to cover the full width and height of the browser window. If that is correct, the following CSS should help you solve your problem.
html {
height: 100%;
}
body {
height: 100%;
background: rgb(2,0,36);
background: linear-gradient(10deg, rgba(2,0,36,1) 0%, rgba(80,80,255,1) 100%, rgba(0,212,255,1) 100%);
background-repeat: no-repeat;
background-size: cover;
}
p, h1, h2, h3, h4, h5, h6 {
font-family: 'Kulim Park', sans-serif;
color: white;
}
.rotated-heading {
font-size: 50px;
float: right;
}
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.