• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

My Practice layout

menator01

King 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
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
 

Attachments

  • 133475-gothic-forest-trees-fantasy-river-mood-996242673.jpeg
    133475-gothic-forest-trees-fantasy-river-mood-996242673.jpeg
    929.8 KB · Views: 2
Top