Hintergrundbild Verschieden

Diskutiere Hintergrundbild Verschieden im CSS Forum im Bereich Programmierung; Hallo Freunde der guten Programmierung, ich stehe gerade vor einem absolut für mich Rätselhaften fall und hoffe das mir hier jemand erklären kann...
Neues Thema erstellen Antworten
  • Hintergrundbild Verschieden Beitrag #1
W
Wampo
New member
Beiträge
1
Punkte Reaktionen
0
Hallo Freunde der guten Programmierung,

ich stehe gerade vor einem absolut für mich Rätselhaften fall und hoffe das mir hier jemand erklären kann was da vor sich geht.
Ich Programmiere aktuell eine kleine Homepage mit HTML/JAVASCRIPT/CSS.
Die Seite wird über meine NAS gehostet und von extern kann ich via DynDNS darauf zugreifen

Auf der Linken Seite seht ihr die Webseitenzugriff über DynDNS auf der rechten Seite über IP Adresse. Beides landet am gleichen Ziel. Kann mir jemand erklären warum diese Seiten so unterschiedlich aussehen????

Außerdem ist mir aufgefallen wenn ich über DynDNS zugreife ist das Bild nicht zentriert über IP Adresse allerdings schon....????
Screenshot webseite.png
Code: 
<!DOCTYPE html>

<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Links for Streamers and also a forwarding page">
<meta name="keywords" content="twitch, live, stream, streamer, gaming, link, forward, homepage">
<meta name="author" content="Daniel Agocs">
<title>Dualsystem Linkforwarding | Welcome</title>
<link rel="icon" type="image/x-icon" href="./images/Coin.png">
<link rel="stylesheet" type="text/css" href="./style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./Scripts/mousepointer.js"></script>

</head>
    <div class="radial-gradient">
        <body>
            <header>
                <div class="container">
                    <div id="branding">
                        <h1><span class="highlight">Dualsystem's</span> Linkforwarding</h1>
                    </div>
                    <nav>
                        <ul>
                            <li class="current"><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="services.html">Services</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
        
            <section id="showcase">
                    <div class="container">
                        <h1>Hier ist momentan noch Baustelle</h1>
                        <p>Bald kommt hier großartiges</p>
                    </div>
            </section>
        
            <section id="boxes">
                <div class="container">
                    <div class="box">
                        <img src="./images/Twitch_logo.svg">
                        <h3>Twitch</h3>
                        <p>Hier kommst du zu unserem Stream auf Twitch</p>
                    </div>
                
                    <div class="box">
                        <img src="./images/TikTok_logo.svg">
                        <h3>TikTok</h3>
                        <p>Freunde an TikTok, dann hier entlang</p>
                    </div>
                
                    <div class="box">
                        <img src="./images/YouTube_logo.svg">
                        <h3>Youtube</h3>
                        <p>Hier gehts zu den VOD´s auf Youtube</p>
                    </div>
                </div>
            </section>
        
            <section id="newsletter">
                <div class="container">
                    <h1>Subscribe to our Newsletter</h1>
                    <form>
                        <input type="email" placeholder=" Enter your eMail here">
                        <button type="Submit" class="button_mail">Subscribe</button>
                    </form>
                </div>
            </section>
        
            <footer>
                <b><a href="mailto:[email protected]">Mail Us</a></b>
                <p>Copyright &copy; 2022 by dualsystem</p>
            </footer>
        </body>
    </div>
[/]


und der css Style

Code: 
:root{
    --backgroundBody: #404f59;
    --backgroundBanner: #35424a;
    --lightLila: #8a11dd;
    --darkGrey: #35424a;
    --white: #ffffff;
    --black: #000000;
    --lightGreen: #14ca00;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}


/*-------------------global-------------------*/
.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

ul{
    margin: 0;
    padding: 0;
}

.button_mail{
    height: 38px;
    background: var(--lightLila);
    border: 0px;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--white);
}
.radial-gradient{
    background: radial-gradient(75% 50% at center, #4fff00, #8a11dd);
}

/*-------------------header-------------------*/
header{
    background: var(--darkGrey);
    color: var(--white);
    padding-top: 30px;
    min-height: 70px;
    border-bottom: var(--lightLila) 8px solid;
}

header a{
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}


header li{
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header #branding{
    float: left;
}

header #branding h1{
    margin: 0;
}

header nav{
    float: right;
    margin-top: 10px
}


header .highlight, header .current a{
    color: var(--lightLila);
    font-weight: bold;
}

header a:hover{
    color: var(--lightLila);
    font-weight:bold;
}

/*-------------------showcase-------------------*/

#showcase{
    min-height: 400px;
    background-image: url("images/systemguys.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -100px;
    text-align: center;
    color: var(--white);
}

#showcase h1{
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 100px;
}

#showcase p{
    font-size: 20px;
}


#newsletter{
    padding: 15px;
    color: var(--white);
    background: var(--darkGrey);
}

#newsletter h1{
    float: left;
}

#newsletter form{
    float: right;
    margin-top: 15px;
}

#newsletter input[type="email"]{
    padding: 4px;
    height: 25px;
    width: 250px;
}


/*-------------------boxes-------------------*/

#boxes{
    margin-top: 20px;
    color: var(--white);
}

#boxes .box{
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
}

#boxes .box img{
    width: 90px
}


aside #sidebar{
    float: right;
    width: 30%;
    margin-top: 10px;
}

footer{
    padding : 1px;
    margin-top: 20px;
    color: var(--white);
    background-color: var(--lightLila);
    text-align: center;
}


/*-------------------media devices format-------------------*/

@media(max-width: 768px){
    header #branding,
    header nav,
    header nav li,
    footer;
    #newsletter h1,
    #newsletter form,
    #boxes .box{
        float: none;
        text-align: center;
        width: 100%;
    }
    
    header{
        padding-bottom: 20px;
    }
 
    #showcase h1{
        margin-top: 40px;
    }
 
    #newsletter button{
        display: block;
        width: 100%;
    }
 
    #newsletter form input[type="email"]{
        width: 100%;
        margin-bottom: 5px;
    }
 
}
 
Zuletzt bearbeitet:
Thema:

Hintergrundbild Verschieden

Oben Unten