CSS Hintergrundbild Größenanpassung

-1

Ich möchte es so, dass wenn Sie die Größe des Bildschirms ändern, schneidet es das Bild von den Rändern ab, so dass der Text an der gleichen Stelle auf dem Bild bleibt.CSS Hintergrundbild Größenanpassung

HTML

<!DOCTYPE html> 
<title>TapeKings</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 

<body> 
<div id="home" class="banner"> 
<div class="container"> 
    <div class="nav"> 

    </div> 
    <div class="head-logo"> 
    <img src="http://s32.postimg.org/ndpqab5l1/logo.png"> 
    </div> 
    <div class="banner-info"> 
    <h3>Custom tape designs taken<br/>to the next level</h3> 
    </div> 
</div> 
</div> 
</body>

CSS

body,html { 
padding: 0px; 
margin: 0px; 
font-family: 'Open Sans', sans-serif; 
} 

.nav { 
width: 100%; 
height: 70px; 
background-color: #000000; 
} 

.banner { 
text-align: center; 
background: url(http://s32.postimg.org/yhfqblzid/img1.jpg) no-repeat 0px 0px; 
background-size: 1920px; 
width: 100%; 
min-height: 959px; 
} 

.head-logo { 
margin-top: 250px; 
text-align: center; 
} 

.head-logo img { 
height: 140px; 
width: 140px; 
} 

.banner-info { 
margin-top: 25px; 
text-align: center; 
} 

.banner-info h3 { 
color: #000000; 
margin: 16px 0; 
font-size: 40px; 
font-family: 'Montserrat', sans-serif; 
}

Hier ist die JSFiddle für meine Website: https://jsfiddle.net/bnhvnnL7/

Dank!

Quelle

2016-04-26 b_dejonge

Like this https://jsfiddle.net/j08691/L6ecf2kL/? – j08691

@ j08691 Ja, nicht sicher, warum ich nicht daran gedacht habe, aber danke! –

Sie können background-position: center; zu Ihrem .banner div hinzu:

.banner { 
    text-align: center; 
    background: url(http://s32.postimg.org/yhfqblzid/img1.jpg) no-repeat 0px 0px; 
    background-size: 1920px; 
    width: 100%; 
    min-height: 959px; 
    background-position:center; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Quelle

2016-04-26 20:14:12 j08691

Vielleicht können diese Ihnen helfen. Ich lege alle Gedanken auf die vertikale Mitte div. In der maximalen Breite können Sie die maximale Breite festlegen. Div ist immer in der Mitte der vertikalen und horizontalen Position. Es wird gut auf dem Telefon oder anderen kleinen Bildschirm aussehen. Grüße.

body, 
 
html { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    background-image: url('http://s32.postimg.org/yhfqblzid/img1.jpg'); 
 
} 
 
.outer { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.middle { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.inner { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 600px; 
 
    text-align: center; 
 
} 
 
.inner img 
 
{ 
 
    height: 140px; 
 
} 
 
.inner h3 { 
 
    color: #000000; 
 
    margin: 16px 0; 
 
    font-size: 40px; 
 
    font-family: 'Montserrat', sans-serif; 
 
}

<body> 
 
    <div class="outer"> 
 
    <div class="middle"> 
 
     <div class="inner"> 
 
     <img src="http://s32.postimg.org/ndpqab5l1/logo.png"> 
 
     <h3>Custom tape designs taken<br/>to the next level</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-04-26 20:28:24

CSS Hintergrundbild Größenanpassung

Antwort

Verwandte Themen