Essentially, I need the image and title to be centered on the screen, but I also need the image to be clickable and open the link. I believe I have the correct code to do this, but I'm still having these two issues. The images also come in two different sizes, so that makes it difficult as well. I just tried making the red pills smaller and the blue pills larger (relative to their original size).
Don't worry about the background keyframes for the other 3 images. I just need help with centering the title and the red and blue pill images.
I tried using the online code but still got the same error. I've tried resizing the image to different sizes, tried different centering techniques, but can't seem to get it to work.
body {
margin: 0;
overflow: hidden;
}
#content {
position: relative;
z-index: 2;
padding: 20px;
text-align: center;
color: rgb(255, 255, 255);
font-family: Arial, sans-serif;
font-size: 24px;
}
@keyframes matrix-rain {
0% {
background-image: url("matrix-pride.png");
}
5% {
background-image: url("matrix-stripes.png");
}
10% {
background-image: url("matrix-green.png");
}
15% {
background-image: url("matrix-pride.png");
}
20% {
background-image: url("matrix-stripes.png");
}
25% {
background-image: url("matrix-green.png");
}
30% {
background-image: url("matrix-pride.png");
}
35% {
background-image: url("matrix-stripes.png");
}
40% {
background-image: url("matrix-green.png");
}
45% {
background-image: url("matrix-pride.png");
}
50% {
background-image: url("matrix-stripes.png");
}
55% {
background-image: url("matrix-green.png");
}
60% {
background-image: url("matrix-pride.png");
}
65% {
background-image: url("matrix-stripes.png");
}
70% {
background-image: url("matrix-green.png");
}
75% {
background-image: url("matrix-pride.png");
}
80% {
background-image: url("matrix-stripes.png");
}
85% {
background-image: url("matrix-green.png");
}
90% {
background-image: url("matrix-pride.png");
}
95% {
background-image: url("matrix-stripes.png");
}
100% {
background-image: url("matrix-green.png");
}
}
#background {
position: fixed;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: matrix-rain 10s linear infinite;
}
#header {
font-family: fantasy;
color: white;
text-align: center;
font-size: 400%;
margin-top: 50px;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div id="background">
<h1 id="header">Pills</h1>
<center>
<a href="google.com"><img src="https://i.stack.imgur.com/D8d6J.png" style="width:35%;height:15%;"></a>
<a href="google.com"><img src="https://i.stack.imgur.com/wPa6r.png" style="width:40%;height:20%;"></a>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I have a guess at your goal, but don't you need to center align the image container? I've done this on the
#backgroundselector.I then moved the resizing responsibilities to the anchor and set its display property to
inline-block. This forces them to contain the image entirely (see Why anchor tags don't take the height and width of their containing element). I also set the maximum width of the image to 100%. This is all done in CSS because inline styles are inefficient and should be avoided.Images vary in size. You can handle this in a number of ways using CSS, but the best solution is to resize them to match. I would reduce the larger size to the same size as the smaller one.
FYI, your style elements are outside the head and body elements. This is invalid HTML. Put it inside the head element.
Additionally, the center element is long is deprecated and should not be used.
body { margin: 0; overflow: hidden; } #content { position: relative; z-index: 2; padding: 20px; text-align: center; color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 24px; } @keyframes matrix-rain { 0% { background-image: url("matrix-pride.png"); } 5% { background-image: url("matrix-stripes.png"); } 10% { background-image: url("matrix-green.png"); } 15% { background-image: url("matrix-pride.png"); } 20% { background-image: url("matrix-stripes.png"); } 25% { background-image: url("matrix-green.png"); } 30% { background-image: url("matrix-pride.png"); } 35% { background-image: url("matrix-stripes.png"); } 40% { background-image: url("matrix-green.png"); } 45% { background-image: url("matrix-pride.png"); } 50% { background-image: url("matrix-stripes.png"); } 55% { background-image: url("matrix-green.png"); } 60% { background-image: url("matrix-pride.png"); } 65% { background-image: url("matrix-stripes.png"); } 70% { background-image: url("matrix-green.png"); } 75% { background-image: url("matrix-pride.png"); } 80% { background-image: url("matrix-stripes.png"); } 85% { background-image: url("matrix-green.png"); } 90% { background-image: url("matrix-pride.png"); } 95% { background-image: url("matrix-stripes.png"); } 100% { background-image: url("matrix-green.png"); } } #background { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; background-size: cover; background-position: center; animation: matrix-rain 10s linear infinite; text-align: center; } #background a { display: inline-block; max-width: 40%; } #background a img { max-width: 100%; } #header { font-family: fantasy; /* color: white; */ text-align: center; font-size: 400%; margin-top: 50px; }<head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <title>Hello, world!</title> </head> <body> <div id="background"> <h1 id="header">Pills</h1> <a href="https://google.com"><img src="https://i.stack.imgur.com/D8d6J.png"></a> <a href="https://google.com"><img src="https://i.stack.imgur.com/wPa6r.png"></a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>