zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundgrafik für verschiedene Endgeräte mit Hilfe von Mediaquerys anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.06.2016, 12:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2011
Ort: 23669 Timmendorfer Strand
Beiträge: 10
MisterX75 befindet sich auf einem aufstrebenden Ast
Standard Hintergrundgrafik für verschiedene Endgeräte mit Hilfe von Mediaquerys anpassen

Moin.

Beim erstellen dieser Webseite Raucherentwöhnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch ist mir aufgefallen, dass die bereitgestellte Hintergrundgrafik sich je nach verwendetem Gerät( Iphone, Ipad, Android Tablet/Smartphone ) bzw. verwendetem Browser anderst Verhält. Nun dachte ich so bei mir ok nimmste halt die Mediaquerys und passt das ganze an. Bustekuchen.

Ich habe versucht es über pixel ratio/resolution zu lösen komme aber nicht auf das gewünschte Ergebnis. Sollte man es über min-/max-width machen ja/nein?

Gibt es gegebenenfalls andere Lösungsansätze?
Benötige ich dann auch noch verschiedene Auflösungen der Hintergrundgrafik?
Wie löse ich das Problem, dass bei manchen Endgeräten der Browser sich an einer speziell Stelle in der Hintergrundgrafik festbeißt und diese dann zoomt auf Teufel komm raus.

Fragen über Fragen und ein total verwirrter Marco.


Grüß und danke für die Hilfe im voraus.
Marco

PS:

Hier der HTML und CSS Code

HTML-Code:
<!DOCTYPE html>
<html class="full" lang="de">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Raucherentw&ouml;hnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch</title>
        <meta name="description" content="Daniel Deutsch Hypnose: Richtig rauchfrei mit Daniel Deutsch - Raucherentw&ouml;hnung durch Hypnose in L&uuml;beck. Tel: 0451 - 604414 oder 0176 - 84744045." />
        <meta name="keywords" content="Hypnose, Raucherentw&ouml;hnung, Daniel Deutsch" />
        <meta name="page-topic" content="Gesundheit, Raucherentw&ouml;hnung, Hypnose" />
        <meta name="publisher" content="Daniel Deutsch" />
        <meta name="copyright" content="Daniel Deutsch" />
        <meta name="language" content="Deutsch,German,de" />
        <meta name="robots" content="index,follow" />
        <meta name="audience" content="all" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Custom CSS -->
        <link href="css/style.css" rel="stylesheet">
        
        <!-- Google Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
                        
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    
    </head>

    <body>
        <!-- Kopfbereich -->
        <div id="header">
            <div class="container">
                <header  class="col-md-12">
                    <div class="headerText col-md-8 col-xs-12">
                        <p><span>Daniel&nbsp;Deutsch</span></p>
                        <p><img src="img/logo2.png" alt="Logo Hypnose Daniel Deutsch" class="img-responsive" /></p>
                        
                    </div>
                    <div class="col-xs-1"></div>
                    <div class="logo col-md-4 col-xs-12">
                        <p><a href="#">Physioterapie</a> | Hypnose</p>
                        <div class="termine">
                            <p>Termine t&auml;glich nach Vereinbarung:</p>
                            <div class="telefon">
                                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20207214</span>
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84744045</span>
                            </div>
                        </div><!--Ende Termine -->
                    </div><!--Ende Logo -->
                </header>
            </div><!-- Ende Container -->
        </div><!--Ende Kopfbereich -->
        
        <!-- Navigation -->
        <nav class="navbar" role="navigation">
            <div class="container">
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="" id="myNavbar">
                    <ul class="nav nav-tabs nav-justified" role="tablist">
                        <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
                        <li role="presentation"><a href="#uebermich" role="tab" data-toggle="tab">&Uuml;ber mich</a></li>
                        <li role="presentation"><a href="#hypnose" role="tab" data-toggle="tab">Hypnose</a></li>
                        <li role="presentation"><a href="#fragen" role="tab" data-toggle="tab">Fragen</a></li>
                        <li role="presentation"><a href="#kontakt" role="tab" data-toggle="tab">Kontakt</a></li>
                        <li role="presentation"><a href="#impressum" role="tab" data-toggle="tab">Impressum</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        
        <!-- Page Content -->
        <div id="content" class="container">
            <div class="row">
                <div class="tab-content">
                    <!-- Inhalt von Home-Hypno -->
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <h1>Herzlich willkommen!</h1>
                        <p>
                            W&uuml;nschen Sie sich Ver&auml;nderungen in Ihrem Leben und m&ouml;chten Sie dabei meine gezielte Unterst&uuml;tzung erhalten?
                            <br /><br />
                            Erz&auml;hlen Sie mir, worum es geht ...
                        </p>
                        <ul>
                            <li><h2>Raucherentw&ouml;hnung</h2></li>
                            <li><h2>Gewichtsoptimierung</h2></li>
                            <li><h2>Kinder-/Elternhypnose</h2></li>
                            <li><h2>Selbstwertgef&uuml;hl</h2></li>
                            <li><h2>Selbstbewusstsein</h2></li>
                            <li><h2>Blockadenl&ouml;sung</h2></li>
                            <li><h2>Konfliktbew&auml;ltigung</h2></li>
                            <li><h2>&Auml;ngste/Furcht (nicht patholog.)</h2></li>
                            <li><h2>Allergien</h2></li>
                            <li><h2>Entspannung bei Pr&uuml;fungen</h2></li>
                            <li><h2>Sch&uuml;chternheit</h2></li>
                            <li><h2>Entscheidungsfindung</h2></li>
                            <li><h2>Aktivieren von Selbstheilungskr&auml;ften</h2></li>
                            <li><h2>Schlafverbesserungen</h2></li>
                            <li><h2>Wellness-Hypnose</h2></li>
                            <li>u.v.m.</li>
                        </ul>
                        Ich helfe Ihnen gern ...
                    </div><!-- Ende Home-Hypno -->
                    
                    <!-- Inhalt von Über mich -->
                    <div role="tabpanel" class="tab-pane fade in" id="uebermich">
                        <div class="col-md-7">
                        <h1>Über mich</h1>
                        <p>
                            Ich bin verheiratet und habe zwei Kinder. Neben meiner Familie ist es auch meine Lebensaufgabe, Menschen mit dem Wunsch nach Ver&auml;nderung durch Hypnose zu helfen.
                            <br /><br />
                            Ich bin ausgebildeter Hypnose-Coach und IntuTrance&reg;-Master auch f&uuml;r Eltern und Kinder. Als Physiotherapeut betreibe ich eine weitere Praxis in L&uuml;beck-Eichholz (<a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">physiotherapie-eichholz.de</a>). Auch hier finden regelm&auml;&szlig;ig Hypnose-Sitzungen statt.
                            <br /><br />
                            Meine Arbeit mit Hypnose bezeichne ich als gezielte Hilfe f&uuml;r Menschen mit unterschiedlichen Problemen - dem Wunsch nach Ver&auml;nderung, Aufkl&auml;rung, Beratung und Entspannung.
                            <br /><br />
                            Sind Sie zufrieden? W&uuml;nschen Sie sich Ver&auml;nderung?
                            <br />
                            Vertrauen Sie Ihrem Bauchgef&uuml;hl ...
                        </p>
                        </div>
                        <div class="img_rechts col-md-5">
                            <img src="img/daniel_img.jpg" class="img-responsive" style="float: right; border: 1px solid #fff; border-radius: 50px 0px;" />
                            <p>
                                Zufriedenheit ist das Ziel ...
                            </p>
                        </div>
                    </div><!-- Ende Über mich -->
                    
                    <!-- Inhalt von Hypnose -->
                    <div role="tabpanel" class="tab-pane fade in" id="hypnose">
                        <h1>Hypnose</h1>
                        Hypnose ist die Arbeit mit dem Unterbewusstsein, in dem sich unz&auml;hlige M&ouml;glichkeiten f&uuml;r Erkenntnisse und L&ouml;sungen befinden. Hierbei sind Sie in Trance. Es gibt verschiedene Trance-Zust&auml;nde, von denen Sie sogar einige kennen, ohne dass es Ihnen vielleicht bewusst ist.
                        <br /><br />
                        Ich freue mich dar&uuml;ber, dass die Ergebnisse meiner Sitzungen als aufkl&auml;rend, richtig und auch als wohltuend bezeichnet werden.
                        <br /><br />
                        Gerne erkl&auml;re ich Ihnen ausf&uuml;hrlich alles &uuml;ber Hypnose, was Sie wissen wollen, in einem pers&ouml;nlichen Gespr&auml;ch.
                        <br />
                        Selbstverst&auml;ndlich kostenlos. Hier entscheiden wir, ob das entsprechende Vertrauen und Bauchgef&uuml;hl f&uuml;r eine Zusammenarbeit gegeben ist. Hierzu z&auml;hlt auch eine einfache Hypnose-&Uuml;bung, um zu erkennen, ob Sie zu einer Hypnose-Sitzung bereit sind.
                        <br /><br />
                        F&uuml;r Fragen und Antworten stehe ich Ihnen gerne kostenfrei zur Verf&uuml;gung oder schauen Sie unter der Kategorie "Fragen".
                    </div><!-- Ende Hypnose -->
                    
                    <!-- Inhalt von Fragen -->
                    <div role="tabpanel" class="tab-pane fade in" id="fragen">
                        <div class="col-md-12">
                        <h1>Häufig gestellte Fragen</h1>
                        <p>
                        <h2><b>Ist Hypnose gef&auml;hrlich?</b></h2>
                        F&uuml;r Menschen ohne bestimmte Erkrankungen nicht. M&ouml;gliche Kontraindikationen werden im Vorgespr&auml;ch erfasst.
                        <br /><br />
                        <h2><b>Wei&szlig; ich in Trance &uuml;berhaupt, was um mich herum passiert?</b></h2>
                        Selbstverst&auml;ndlich, und Sie k&ouml;nnen die Sitzung sogar zu jedem Zeitpunkt abbrechen, wenn Ihnen unwohl ist.
                        <br /><br />
                        <h2><b>Was kostet eine Hypnose-Anwendung und wie viele Sitzungen sind n&ouml;tig?</b></h2>
                        Eine durchschnittlich 90 min&uuml;tige Daniel-Deutsch-Hypnose-Sitzung ist normalerweise ausreichend, um das gew&uuml;nschte Ziel zu erreichen. Mein Honorar hierf&uuml;r betr&auml;gt 150,- &euro; und kann mit EC-Karte oder bar bezahlt werden. <!-- Meine Leistung berechne ich mit &euro; 150,- -->
                        Sollte eine weitere oder mehrere Sitzung(en) bez&uuml;glich eines Themas (Hypnose, Beratung, Coaching) gewünscht oder ggf. nötig sein, berechne ich diese mit 80,- &euro; pro Sitzung.
                        <br /><br />
                        <h2><b>Ich bin unsicher. Darf ich eine Begleitperson mitbringen?</b></h2>
                        Sie d&uuml;rfen gerne eine Begleitperson mitbringen, die w&auml;hrend der Sitzung anwesend ist.
                        <br /><br />
                        <h2><b>Was muss ich vor der Hypnose beachten?</b></h2>
                        Konsumieren Sie bitte keinen Alkohol und keine Drogen. Bitte vermeiden Sie am Tag der Hypnose-Sitzung vorhersehbaren, belastenden Stress, damit die Hypnose f&uuml;r Sie optimal wirken kann!
                        <br /><br />
                        <h2><b>Was muss ich nach der Hypnose beachten?</b></h2>
                        In den ersten drei Folgetagen vermeiden Sie bitte Alkohol-/Drogenkonsum, damit die Hypnosesitzung optimal wirken kann. Es gibt Ver&auml;nderungen, die sich nicht sofort, sondern erst in der Folgezeit entsprechend entwickeln k&ouml;nnen.
                        <br /><br />
                        <h2><b>Wo findet die Hypnosesitzung statt?</b></h2>
                        In der Luisenstra&szlig;e 1, 23568 L&uuml;beck
                        <br />
                        HYPNOSE-Praxis Daniel Deutsch
                        <br />
                        und
                        <br />
                        Im Brandenbaumer Feld 9, 23564 L&uuml;beck
                        <br />
                        <a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">Praxis f&uuml;r Physiotherapie und Hypnose</a>
                        <br /><br />
                        Hausbesuche mache ich nach Absprache ebenfalls gern!
                        
                        <br /><br />
                        <h2><b>Sie haben weitere Fragen?</b></h2>
                        Dann rufen Sie einfach an:
                        <p class="telefon">
                            <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20 20 72 14</span>
                        </p>
                        <p class="telefon">
                            <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84 74 40 45</span>
                        </p>
                        oder nutzen Sie das <a href="/kontakt/index.php" title="Kontaktformular">Kontaktformular</a>.
                        </p></div>
                    </div><!-- Ende Fragen -->
                    
                    <!-- Inhalt von Kontakt -->
                    <div role="tabpanel" class="tab-pane fade in" id="kontakt">
                        <div class="col-md-12">
                            <h1>Kontakt</h1><br />
                            <b>Sie haben weitere Fragen oder m&ouml;chten Termine vereinbaren?</b><br /><br />
                            Dann rufen Sie einfach an:
                            <br /><br />
                            <p>
                                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20 20 72 14</span>
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84 74 40 45</span>
                            </p>
                            <hr class="hr1" />
                            <p class="adresse">
                                Luisenstra&szlig;e 1
                                <br />
                                23568 L&uuml;beck
                            </p>
                            <hr class="hr2" />
                            <p class="adresse">
                                Im Brandenbaumer Feld 9
                                <br />
                                23564 L&uuml;beck
                            </p>
                            <hr class="hr3" />
                            <p>
                                Parkpl&auml;tze sind vorhanden.
                            </p>
                        </div>
                        
                        <div class="col-md-12">
                            <form id="frmKontakt" role="form" name="kontaktFormular" accept-charset="UTF-8">
                                <div class="row">                        
                                    <div class="col-lg-12">
                                        
                                        <!-- Ausgabe der Meldungen vom Kontaktformular -->
                                        <div id="erfolgsmeldung" class="col-lg-6" role="alert"></div>
                                        <!-- Ende Ausgabe der Meldungen vom Kontaktformular -->
                                        
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group has-feedback" id="frmGrpNachname">
                                            <label class="control-label" for="nachname">Nachname <span>*</span></label>
                                            <input type="text" class="form-control" id="nachname" placeholder="Mustermann">
                                            <span class="nachnameStatus" aria-hidden="true"></span>
                                            <span id="nachnameStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group has-feedback" id="frmGrpEmail">
                                            <label class="control-label" for="email">Email Adresse <span>*</span></label>
                                            <input type="text" class="form-control" id="email" placeholder="Mustermann@muster.de" />
                                            <span class="emailStatus" aria-hidden="true"></span>
                                            <span id="emailStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group" id="frmGrpTelefon">
                                            <label for="phone">Telefonnummer</label>
                                            <input type="text" class="form-control" id="phone" placeholder="01234/56789" />
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-12">
                                        <div class="form-group has-feedback" id="frmGrpNachricht">
                                            <label class="control-label" for="nachricht">Ihre Nachricht an uns <span>*</span></label>
                                            <textarea class="form-control" id="nachricht" placeholder="Hier Ihre Nachricht schreiben..." rows="6"></textarea>
                                            <span class="nachrichtStatus" aria-hidden="true"></span>
                                            <span id="nachrichtStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div id="txt_Pfilchtfelder" class="form-group text-left">
                                        <small>Die mit <span>*</span> markierten Felder sind Pflichtfelder!</small>
                                    </div>  
                                                                
                                    <div class="form-group text-right">
                                        <button class="btn btn-default">Nachricht versenden</button>
                                    </div>                        
                                </div><!-- Ende row Kontaktformular -->
                                
                            </form>
                        </div>
                    </div><!-- Ende Kontakt -->
                    
                    <!-- Inhalt von Impressum -->
                    <div role="tabpanel" class="tab-pane fade in" id="impressum">
                        <h1>Impressum</h1><br />
                    </div><!-- Ende Kontakt -->
                </div><!-- Ende tabcontent -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    
        <!-- jQuery -->
        <script src="js/jquery-2.1.4.min.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        
        <!-- Kontaktformular JS -->
        <script src="js/kontaktFormular.js"></script>

    </body>
</html>
HTML-Code:
/*!
 * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    margin-top: 0px;
    margin-bottom: 50px;
    background: none;
    color: #ededed;
    font-size: 16px;
    /*font-family: sans-serif;*/
    font-family: 'Ubuntu', sans-serif;
}

nav{
    width: 100%;
}

a{
    text-decoration: none;
    color: #EDEDED;
}

a:visited, a:link, a:active, a:hover{
    text-decoration: none;
    outline: none;
}

hr{
    display: block;
    margin: 10px 0;
    height: 1px;
    background: #fff;
    width: 100%;
}


/*********************** ID ******************************/
#header{
    margin-bottom: 20px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7392af+0,4f6d8f+50,1d354d+100 */
    background: #7392af; /* Old browsers */
    background: -moz-linear-gradient(left, #7392af 0%, #4f6d8f 50%, #1d354d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #7392af 0%,#4f6d8f 50%,#1d354d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #7392af 0%,#4f6d8f 50%,#1d354d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7392af', endColorstr='#1d354d',GradientType=1 ); /* IE6-9 */
    color: rgba(255, 255, 255, 0.35);/*#fff;*/
}

#oeffnungszeiten h3{
    font-size: 18px;
}

#oeffnungszeiten h4{
    font-size: 16px;
}

#content{
    min-width: 320px;
    max-width: 960px;
    background-color: rgba(0,0,0,0.25);
}

#home h2{
    font-size: 15px;
}

#uebermich > p >  a{
    text-decoration: none;
    border-bottom: 1px solid #fff;
    color: #EDEDED;
}

#uebermich > p > a:hover{
    text-decoration: none;
    border-bottom: 2px solid #ff0000;
    color: #EDEDED;
}

#fragen h2{
    font-size: 18px;
}

#fragen p{
    padding-bottom: 15px;
}

#fragen .telefon{
    padding-bottom: 0;
}

#fragen .telefon .glyphicon{
    font-size: 16px;
}

#kontakt p:last-child{
    font-size: 18px;
}

#kontakt p > span:before{
    font-size: 16px;
}

#map{
    width: 100%;
    height: 400px;
    /*margin-top: 50px;*/
    background-color: #ccc;
}




/************************************ Class *********************/
.full {
  background: url(../img/beach_bg.jpg) #000 no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.glyphicon{
    font-size: 20px;
}

.tab-content{
    margin-bottom: 15px;
}

.headerText{
    padding-top: 20px;
    font-size: 48px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.headerText > p:first-child{
    color: rgba(255, 255, 255, 0.9);
    font-size: 54px;
    text-transform: none;
    margin-bottom: 0px;
    font-family: serif;
    /*text-align: center;*/
}

.headerText > p:last-child{
    margin-left: 32px;
    /*text-align: center;
    text-transform: none;*/
}

.headerText span{
    margin-left: 15px;
    /*text-transform: none;*/
}

.logo{
    text-align: left;
    padding: 10px 0px 0px 95px;
    color: rgba(255, 255, 255, 0.8);
}

.logo > p:first-child{
    font-size: 16px;
}

.img_rechts{
    margin-top: 20px;
}

.termine{
    text-align: left;
    padding-top: 10px;
    font-size: 16px;
}

.tab-content{
    margin-left: 10px;
}

.top{
    margin-bottom: 20px;
}

.bottom{
    margin-top: 20px;
    float: left;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover{
    background-color: rgba(0, 0, 0, 0.5);
    color: #ededed;
}

.img_rechts > p{
    font-family: 'Tangerine';
    font-weight: 700;
    font-size: 40px;
    clear: right;
    float: right;
    margin-top: 25px;
}

.adresse{
    font-size: 20px;
}

.telefon{
     margin-top: 1px;
     font-size: 16px;
}

.hr2{
    width: 75%;
}

.hr3{
    width: 50%;
}

.text-right{
    padding-right: 15px;
}

.has-error .form-control{
    border: 3px solid #990000;
}

.form-control:focus{
    border: 3px solid #16A9DA;
    box-shadow: ;
}

.has-error .control-label{
    color: #FF1711;
}

.has-error .form-control {
    border: 3px solid #FF1711;
}

.has-error .form-control-feedback {
    color: #FF1711;
}





/*********************************** Landscape *******************************************/
@media
    screen and ( -webkit-min-device-pixel-ratio: 3) and ( orientation: landscape),
    screen and ( min-resolution: 288dpi) and ( orientation: landscape),
    screen and ( min-resolution: 3dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 42px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 20px;
        }
    }
    

@media
    screen and ( -webkit-min-device-pixel-ratio: 2) and ( orientation: landscape),
    screen and ( min-resolution: 192dpi) and ( orientation: landscape),
    screen and ( min-resolution: 2dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg_568.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 42px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 20px;
        }
    }
   
@media
    screen and ( -webkit-min-device-pixel-ratio: 1) and ( orientation: landscape),
    screen and ( min-resolution: 96dpi) and ( orientation: landscape),
    screen and ( min-resolution: 1dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg_320_land.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 32px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 0px;
        }
    }

/*********************************** Portrait ******************************************/    
@media
    screen and ( -webkit-min-device-pixel-ratio: 3) and ( orientation: portrait),
    screen and ( min-resolution: 288dpi) and ( orientation: portrait),
    screen and ( min-resolution: 3dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_320_port.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 30px;
        letter-spacing: 2px;
        padding-left: 5px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            margin-bottom: 10px;
        }
    }


@media
    screen and ( -webkit-min-device-pixel-ratio: 2) and ( orientation: portrait),
    screen and ( min-resolution: 192dpi) and ( orientation: portrait),
    screen and ( min-resolution: 2dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_568.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 30px;
        letter-spacing: 2px;
        padding-left: 5px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            margin-bottom: 10px;
        }
    }

@media
    screen and ( -webkit-min-device-pixel-ratio: 1) and ( orientation: portrait),
    screen and ( min-resolution: 96dpi) and ( orientation: portrait),
    screen and ( min-resolution: 1dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_320_port.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 32px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 0px;
        }
    }
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.06.2016, 12:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.226
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

So da ist das Problem doch besser geschildert.
Was möchtest du mit deinen super-spezifischen Mediaqueries erreichen? Du fragst da x verschiedene Dinge ab, gibt es einen bestimmten Grund dafür?
Zum Vergleich, so schauen meine mediaqueries aus und ich wüsste nicht, wieso ich mehr brauchen würde (außer für einen speziellen Fall, dazu komm ich noch)
@media only screen and (max-width:50em) { ... }
@media only screen and (max-width:30em) { .... }

Achte darauf, dass ich keinerlei Pixelwerte verwende, einfach weils funktioniert und ich nie Probleme damit hatte. Auch zu beachten: Das ist 4 Jahre alt, wenn man in pixel arbeiten will, soll man ruhig, das nur zur Erklärung.

Beachte auch, dass ich kein min- und max- vermische. Warum? Weil mediaqueries nun mal auch nur CSS sind und vorangegangene Regeln überschrieben werden. Hab ich das so wie von mir gepostet, dann greift die "kleinste" Bildschirmgröße und übernimmt erst mal alles von allen vorher größeren. Das führt dazu, dass ich bei immer kleineren Bildschirmen auch meist immer weniger CSS habe, da ich nur Änderungen vornehmen muss. Ja, ich gehe von groß zu klein (Kein mobile first), ist aber so angefordert.

Nun zum Zusatz: Da wo ich eventuell mehr als nur max-width brauche, ist, wenn ich retina-displays unterstützen müsste. Das muss ich nicht, aber dann könnte ich das so erweitern:
@media only screen and (max-width:50em) { ... }
@media only screen and (max-width:50em) and ( -webkit-min-device-pixel-ratio: 2){ ... }
@media only screen and (max-width:30em) { .... }
@media only screen and (max-width:30em) and ( -webkit-min-device-pixel-ratio: 2) { .... }

Das Selbe erneut, nur halt für 2x-Auflösung. Auch wüsste ich nicht, wieso es wichtig ist, ob portrait oder landscape eine Rolle spielt, da kommt dann die für die Auflösung spezifizierte CSS-Regel zum Einsatz.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.06.2016, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2011
Ort: 23669 Timmendorfer Strand
Beiträge: 10
MisterX75 befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Ausführung. Das hat mir schon mal sehr geholfen.
Ich weiß mit den Pixeln ist verwirrend. Dadurch, dass ich mir verschiedene Videotutorials über Responsive Webdesign angeschaut habe und man entweder px oder % verwendet hat, habe ich mich für px entschieden. Werde es aber sicher umändern, da ich das mit den em "dank deiner Ausführung und dem Link" jetzt auch richtig verstanden habe. Ich werde das ganze heute im laufe des restlichen Tages versuchen umzusetzen und würde mich ggf. nochmal melden, wenn es irgendwo hängt.

Vielen Dank und Grüße
Marco
Mit Zitat antworten
  #4 (permalink)  
Alt 03.07.2016, 19:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2011
Ort: 23669 Timmendorfer Strand
Beiträge: 10
MisterX75 befindet sich auf einem aufstrebenden Ast
Standard

Moin.
Ich habe nun die Mediaquerys soweit angepasst und es zu Testzwecken auf den Server geladen. Das Hintergrundbild habe ich auf eine Breite von 2208px gesetz und hinterlegt. Die Backgroundsize steht auf cover. Im FF wird mir der Hintergrund sehr gut angezeigt. Im Chrome auf dem Smartphone ist es total weit reingezoomt, sodas man nur noch die Zweige sieht.

Screenshots:

Chrome:
Querformat
Hochformat

Firefox:
Hochformat
Querformat

Vielen Dank im voraus.

MfG
Marco
Mit Zitat antworten
  #5 (permalink)  
Alt 04.07.2016, 10:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.226
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Screenshots helfen leider gar nicht, wir brauchen entweder den Code, auf das notwendigste reduziert, damit wir das nachvollziehen können (am besten wenn wirs einfach bei jsfiddle.net oder ähnlichen Seiten reinkopieren) oder am Besten einen Link zur betroffenen Seite.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.07.2016, 11:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.106
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
am Besten einen Link zur betroffenen Seite
Der findet sich bereits im ersten Beitrag, geht leider aber opitsch im Text unter.

Raucherentwöhnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 04.07.2016, 11:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.226
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Danke für den Hinweis, ganz übersehen so früh am Morgen. Na mal anschauen
Mit Zitat antworten
  #8 (permalink)  
Alt 04.07.2016, 11:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.106
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Das ist mir hier im Forum auch schon ein paar Mal passiert. Mein Firefox zeigt die Unterstreichungen der Links nicht an und die Farbe der Links unterscheidet sich kaum vom übrigen Text.

Ich habe meinen Firefox grade angewiesen, die Links in den Beiträgen andersfarbig hervorzuheben. Jetzt gehen sie auch im Fließtext nicht unter.

Gruss

MrMurphy
Mit Zitat antworten
  #9 (permalink)  
Alt 04.07.2016, 16:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.226
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Bei mir wars einzig und allein mein ungenaues Lesen in der früh. Habs mir jetzt aber mal angscahut und kann das Problem nicht so wirklich nachvollziehen? Sieht man das bei der Seite schon? Was muss ich genau tun damit ich das sehe? Ich hab die Seite mal im FF und im Chrome aufgeamcht und kleiner gemacht, da schaut das HG-Bild eigentlich soweit gleich aus.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.07.2016, 19:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2011
Ort: 23669 Timmendorfer Strand
Beiträge: 10
MisterX75 befindet sich auf einem aufstrebenden Ast
Standard

Das Problem besthet nicht in der Ansicht vom Chrome auf dem Desktop(Webdeveloperansicht für IPad und IPhone) zeigen es absolut Fehlerfrei. Das Problem besteht auf den Endgeräten selber. Mein Kumpel für den ich das hier mache besitzt nur Apple Geräte und auf dem IPhone wird es komplett eingezoomt und auf dem IPad wird das HG-Bild mitgescrollt. Den Code kann ich gerne nochmal zur Verfügung stellen. Da ich keine Applegeäte besitze teste ich auch immer mit Chrome.

Wenn man sich die beiden Screenshots oben für den Chrome anschaut sieht man, was ich meine. Diese Screens sind zwar von meinem Xperia Z1, aber auf dem Safari IPhone 6 Plus sieht es genauso aus.

MfG
Marco
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
hintergrundgrafik, mediaquery

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrundgrafik nach auflösung anpassen Bady CSS 1 16.03.2016 14:50
Hintergrundbild auf verschiedene Monitorgrößen anpassen Moin CSS 2 03.06.2010 00:12
Hilfe zum Anpassen einer CSS-Vorlage benötigt Sergeant CSS 5 15.11.2009 15:42
Hilfe .... Verschiedene Browserdarstellungen!! ---Nico--- CSS 1 03.04.2009 17:51
Div-Boxen-Gerüst auf Hintergrundgrafik anpassen Dirk (X)HTML 11 05.01.2008 19:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:46 Uhr.