|
|||
Bestimmten Bereich eines Bildes anzeigen lassen (Fenstermodus)
Hallo Community,
ich möchte folgendes mit einer Programmierung erreichen und hoffe, dass ihr mir dabei helfen könnt: Und zwar möchte ich (eine Grafik wird das nochmal verdeutlichen) ein Bild im vollen Modus des Browsers komplett anzeigen lassen und wenn man den Browser kleiner zieht (Fenstermodus) das praktisch links und rechts sich da bild so anpasst, dass rechts und links etwas fehlt und man nur die Mitte des Bildes angezeigt bekommt. Diese Grafik verdeutlicht das nochmal: http://reyplayxs.de/Test/ Danke jetzt schonmal für eure Antworten ich bin mir sicher ihr könnt mir weiterhelfen. |
Sponsored Links |
|
|||
Hallo,
Zitat:
Handelt es sich um ein Hintergrundbild (background-image) oder befindet es sich als Vordergrundbild (img src="") im HTML-Quelltext? Und wie sieht dein bisheriger HTML/CSS-Quelltext aus? Am besten ein Link zu deiner Seite. Gruss MrMurphy |
Sponsored Links |
|
|||
Hey
- zur Zeit ist es mit <img src=""> gelöst (gerne bereit für andere Lösungswege) ---- HTML Code ---- HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <title>Titel</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wapper"> <div id="headline"> <div id="netbar"> <img alt="Networklogo" src="http://xhtmlforum.de/images/network-logo.png" id="networklogo"> </div> <!-- netbar --> <div id="login"> <img alt="Login" src="http://xhtmlforum.de/images/login.png" id="loginbild"> </div> <!-- login --> </div> <!-- headline --> <div id="header"> <img alt="Headerbild" src="http://xhtmlforum.de/images/IMG_5854.JPG" id="headerbild"> </div> <!-- header --> <div id="navi"> <div id="menu1"> </div> <!-- menu1 --> <div id="sozibox"> </div> <!-- sozibox --> </div> <!-- navi --> <div id="content"> <div id="in-content"> </div> <!-- in-content --> </div> <!-- content --> </div> <!-- wapper --> </body> </html> ---- CSS Code ---- HTML-Code:
body { margin: 0px; padding: 0px; } div#headline { display: block; position: fixed; width: 100%; height: 4%; min-height: 30px; top: 0%; left: 50%; margin-left: -50%; background-color: #313131; box-shadow: 1px 1px 6px #000; -moz-box-shadow: 1px 1px 6px #000; -webkit-box-shadow: 1px 1px 6px #000; -khtml-box-shadow: 1px 1px 6px #000; -o-box-shadow: 1px 1px 6px #000; z-index: 48; } div#netbar { display: block; width: 100%; height: 4%; min-height: 25px; top: 0%; position: fixed; } img#networklogo { width: auto; height: 100%; min-height: 30px; display: block; top: 0%; z-index: 50; } div#login { display: block; width: 100%; height: 4%; min-height: 30px; top: 0%; position: fixed; } img#loginbild { width: auto; height: 100%; min-height: 30px; float: right; display: block; top: 0%; z-index: 49; } /* Ende Headline */ div#header { width: auto; height: 30%; background-position: center; } img#headerbild { height: 35%; top: 4%; width: auto; position: fixed; background-color: transparent; background-size: cover; background-image: url(images/IMG_5854.JPG) } div#content { display: block; width: 100%; height: 2000px; left: 50%; margin-left: -50%; position: relative; margin-top: 25%; background: #ebebeb; } Geändert von Thorxel (12.04.2015 um 00:13 Uhr) |
|
|||
Zitat:
Nicht sehr hilfreich was du zeigst auch noch mit Position fixed. Als Hintergrundbild siehe Beispiel: Edit fiddle - JSFiddle HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel der Webseite</title> <style type="text/css"> html { background-color: #fff; font-size: 100%; } body { background-color: #EEC580; color: black; margin: 0; text-align: center; } header { background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/summer-landscape.jpg); background-position: center bottom; background-repeat: no-repeat; border: 1px dotted #000; display: block; padding: 0 0 30% 0; margin: 0; } header h1 { background-color: #EEC580; } nav { display: block; margin: 0; } main { border: 1px dotted #000; display: block; margin: 0; } footer { display: block; } h1, h2, h3, h4, h5, h6 { margin: 0; color: maroon; } p { padding: 1%; margin: 0; } </style> </head> <body> <header> <h1>Header</h1> </header> <nav> <h3>Nav</h3> </nav> <main> <h2>Main</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </main> <footer> <h4>Footer</h4> </footer> </body> </html> MfG Roland |
|
|||
OK. Ich lass es so, wie du es hast.
Dan vielleicht so: Code:
div#header { width: auto; } img#headerbild { background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/grass-illustration.jpg); background-color: transparent; background-position: center bottom; padding-bottom: 30%; width: 25px; height: 25px; padding-right: 98%; position: fixed; top: 4%; } HTML-Code:
<div id="header"> <img id="headerbild" src="http://placehold.it/25x25/555555/555555.png" alt="headerbild"> </div> <!-- header --> MfG Roland |
|
|||
Okay sieht schon gut aus die Grafik bleibt in der Mitte wie es sein soll aber die Höhe soll bei 30% bleiben hast du eine Idee wie man das noch hin bekommt?
Die Website soll responsive sein MFG Thorxel |
|
|||
Zitat:
Code:
div#header { height: 340px; } img#headerbild { padding-bottom: 300px; } MfG Roland |
|
|||
So habe ich es derzeit nur zum Testen.
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel der Webseite</title> <style type="text/css"> * { margin: 0; padding: 0; } div#wrapper { } div#headline { background-color: #313131; color: white; position: fixed; width: 100%; height: 30px; top: 0; left: 0; z-index: 48; } div#header { background-color: fuchsia; height: 355px; } div#header img { background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/grass-illustration.jpg); background-position: center bottom; background-repeat: no-repeat; background-color: aqua; height: 25px; padding: 0 98% 300px 0; position: fixed; top: 30px; width: 25px; } div#content { height: 2000px; position: relative; margin-top: 25%; background: #ebebeb; } </style> </head> <body> <div> <div id="headline"> <p>Lorem ipsum.</p> </div> <div id="header"> <img src="http://placehold.it/25x25/555555/555555.png" alt=""> </div> <div id="navi"> <p>Lorem ipsum.</p> </div> <div id="content"> <h1>Hello</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </div> </div> </body> </html> _______________ MfG Roland Geändert von K.Roland (14.04.2015 um 15:20 Uhr) |
Sponsored Links |
Stichwörter |
bild, bildanpassung, css, fenstermodus, html, vollbildmodus |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
class hinzufügen und entfernen wenn man bestimmten Bereich erreicht hat | zubl | Javascript & Ajax | 1 | 04.04.2012 17:42 |
externe website, auf nur bestimmten bereich anzeigen lassen | HansDerHans | CSS | 2 | 07.01.2012 00:11 |
CSS Stylesheet in bestimmten Bereich deaktivieren | ar36 | CSS | 1 | 11.08.2011 14:31 |
linkziel in einem bestimmten bereich anzeigen?? css + 1&1 warenkorbfunktion | noahline | CSS | 1 | 09.10.2006 13:44 |
print css (nur bestimmten Bereich anzeigen) | freddy | CSS | 4 | 16.03.2004 17:38 |