• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Höhe eines Background-Image setzen

D

dfb001

Neues Mitglied
Hallo,
Ich habe ein Problem unzwar habe Ich einen Div Container erstellt und habe auch ein Background Image festgelegt, die breite definiert usw. . Mein Problem ist jetzt jedoch das wenn Ich die Höhe des Containers und somit auch die des Hintergrundbildes in Prozent angebe das ganze nur bis unter den darüber liegenden Text geht und nicht weiter.

HTML:
<div id=wrapper>
<h1> Titel </h1>
<p> Der Text <p>
</div>

CSS:
html, body {
height: 100%;
margin:0;
font-family: 'Source Sans Pro', sans-serif;
background-color: white;;
overflow: hidden;
}

#wrapper {
background-image: url(../images/london_wallpaper.jpg);
background-repeat: no-repeat;
width: 100%;
height: 70%;
text-align: center;
}

Ich hoffe Ihr könnt mir helfen. Danke.
 
Die Box ist natürlich nur so groß wie Du sie definierst. Das Hintergrundbild kann auch nur diesen Bereich einnehmen. Was genau willst Du nun erreichen? Dass das Hintergrundbild größer ist als die Box?
 
ja aber mein Problem ist das wenn ich angaben zu der Höhe in Prozent mache das Hintergrundbild gar nicht mehr vorhanden ist. Wenn Ich jetzt allerdings die Höhe in Pixel definiere wird das Hintergrundblid problemlos angezeigt. Ich habe auch schon ausprobiert den Body mit min-height auf 1080px zu definieren, damit hatte Ich jedoch keinen Erfolg als ich den wrapper mit Prozent definiert habe.
 
s
Code: 
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,600italic,700italic);

html, body {
    min-height: 1080px;
    margin:0;
    font-family: 'Source Sans Pro', sans-serif;
    overflow: hidden;
}



#iconbar {
    position: fixed;
    background-color: #303030;
    color:white;
    height: 100%;
    width: 90px;
    text-align: center;
}

.icon {
    width: 60px;
    height: 60px;
    padding-top: 5px;
    margin: auto;
    float: none;
}


.icon_text {
    color: #7D7D7D;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11pt;
    font-style: 900italic;
   
}

#news_icon {
    padding-top: 20px;
    width: 60px;
    height: 60px;
    margin: auto;
    float: none;
}

#wrapper {
    background-image: url(../images/london_wallpaper.jpg); /* Den Pfad zum .jpg */
    width: calc(100% - 90px);
    height: 100%;
    float: right;
    background-repeat: no-repeat; /* Keine Wiederholung des Bildes */
    text-align: center; /* Text in der Mitte */

}

.article_image {
    width: 60%;
    margin-left: 20%;
    margin-top: 20px;
}

.text_box {
    width: 40%;
    margin-left: 30%;
    border-radius: 5px;
    background-color: white;
    hyphens: auto;
    text-align: justify;
}

.autor_date {
    font-size: 12pt;
    float: right;
    padding-right: 10px;
    opacity: 0.8;
}

.title {
    font-size: 20pt;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    margin:auto;
    font-weight: bold;
}

.text {
    padding-left: 5px;
    width: 45%;
    hyphens: auto;
    text-align: justify;
}


und hier der HTML Code
Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="style.css" type="text/css" />
<head>

<body>
    <div id="wrapper">
        <h1> Titel </h1>
        <p>Hier kommt der Text</p>
    </div>

</body>
</html>

Online Stellen kann ich es nicht aber es sollte so ähnlich sein wie auf dieser Seite: http://qideas.org
 
HTML: 
html, body {
  height:100%; /* geändert in Prozent */
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  overflow: hidden;
}
....
#wrapper {
  background-image: url(bild2.jpg); /* Den Pfad zum .jpg */
  width: calc(100% - 90px);
  min-height: 100%; /* geändert in min-height */
  background-size:cover; /* Bild anpassen */
  float: right;
  background-repeat: no-repeat; /* Keine Wiederholung des Bildes */
  text-align: center; /* Text in der Mitte */
So sollte es klappen.
 
@djheke danke für deine Hilfe jedoch klappt es auch so nicht, ich habs selber geschafft hier ist der Code wenn es noch jemand interessiert:

Code: 
html, body {
  height:100%; /* geändert in Prozent */
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  overflow: hidden;
}


#wrapper {
    background-image: url(../images/london_wallpaper.jpg); /* Den Pfad zum .jpg */
    width: calc(100% - 90px);
    background-size: cover; /* Bild anpassen */
    right: 0;
    background-repeat: no-repeat; /* Keine Wiederholung des Bildes */
    text-align: center; /* Text in der Mitte */
    position: absolute ;
    height: 100%;
    z-index: -3;
}

ausschlaggebend war position auf absolute zu setzen und dann den z-index auf -XX setzen damit eben auch andere Elemente durch kommen.
 
Also, ich hatte natürlich die Änderungen getestet und es funktioniert. Könnte an den unvollständigen Quelltext gelegen haben.
Nun funktioniert's ja.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben