menator01
Gold Coder
So when doing the practice layout using an image backdrop, I use the ::before to get opacity to work without fading the text but, Links do not work.
How do I get the links to work using the ::before css thing?
I will post the relevant codes and image.
css
html
image
How do I get the links to work using the ::before css thing?
I will post the relevant codes and image.
css
CSS:
@font-face {
font-family: 'OldLondon';
src: url(/static/fonts/OldLondon.ttf);
}
body {
background-color: rgb(5,5,5);
}
#backdrop {
height: 100vh;
display: flex;
}
#backdrop::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(/static/images/Backdrops/forest.svg);
background-size: cover;
opacity: 0.2;
}
#main-table {
height: 100vh;
width: 100%;
}
#main-table td {
vertical-align: top;
}
#main-header {
width: 100%;
height: 120px;
text-align: center;
box-shadow: 0 0 2px white;
border-radius: 0 0 20% 20%;
font-family: OldLondon;
font-size: 5em;
color: white;
padding-bottom: .5em;
}
#left, #right {
height: 100%;
width: 10%;
padding-left: 1em;
}
#center {
width: 80%;
height: 100%;
box-shadow: 0 0 2px white;
border-radius: 20%;
background-color: black;
padding: 15em 8em 15em 8em;
color: white;
}
#footer {
height: 40px;
box-shadow: 0 0 2px white;
text-align: center;
border-radius: 20% 20% 0 0;
color: white;
}
html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Site Page Title -->
<title>{% block title %}My Site{% endblock %}</title>
<!-- Metas -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
{{bootstrap.load_css()}}
<link rel="stylesheet" href="static/css/base.css">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="backdrop">
<!-- Alert Boxes -->
{% from 'bootstrap5/utils.html' import render_messages %}
{{render_messages(container=True, dismissible=True, dismiss_animate=True)}}
<table id="main-table">
<tr>
<th id="main-header" colspan="3">Gaming Rat</th>
</tr>
<tr>
<td id="left">
<a href="http://yahoo.com">Yahoo</a>
</td>
<td id="center">
<!-- Start Site Content Container -->
{% block content %} {% endblock %}
</td>
<td id="right">
</td>
</tr>
<tr>
<td id="footer" colspan="3">Gaming Rat Productions</td>
</tr>
</table>
<!-- Javascript -->
{{bootstrap.load_js()}}
<script src="/static/js/alert_close.js"></script>
</div>
</body>
</html>
image