Essentially I need the images and header to be centered in the screen but I also need the images to be clickable and open links. I believe I have the right code to do so but I’m still having both problems. The images are also 2 different sizes so that also makes it difficult. I simply tried making the red pill smaller and blue pill larger, relative to their original sizes.
Don’t worry about the background key frames with the 3 other images. I just need help with the centering of the header, and the red and blue pill images.
I tried using code from online but I’m still getting the same errors. I’ve tried resizing the images to different sizes, I’ve tried different centering techniques but cant seem to get it.
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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
2
Answers
I’m guessing somewhat as to your goal, but don’t you just need to center-align the image container? I’ve done so on the
#backgroundselector.I’ve then moved sizing duty to the anchors and set their display property to
inline-block. This forces them to contain the images completely (see Why anchor tag does not take height and width of its containing element). I’ve also set max-width to 100% for the images. This is all done in CSS since inline styles are inefficient and to be avoided.The images are unequal in size. You can handle that any number of ways with CSS, but the best fix is to resize them to match. I would reduce the larger one to be the same size as the smaller.
FYI, your style element was outside the head and body elements. This is invalid HTML. Put it inside the head element.
Also, the center element is long deprecated and should not be used.
It might be as simple as adding different
flexcontainers to your markup, one on the main container, and one to hold the anchors/images.Here both the
mainand.pillscontainers are set asflexwhilemainisflex-direction: column. You can then use CSS to adjust the width of the images, and proportion them properly.