CSS背景图像调整大小

问题描述：

我希望它能够在您调整屏幕大小时切断边缘的图像，以便文本保持在图像的相同位置。CSS背景图像调整大小

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; 
}

这里是的jsfiddle我的网站：https://jsfiddle.net/bnhvnnL7/

谢谢！

像这样https://jsfiddle.net/j08691/L6ecf2kL/？ – j08691

@ j08691是的，不知道为什么我没有想到，但谢谢！ –

答

您可以添加background-position: center;您.banner DIV：

.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

答

也许这可以帮助你。我把所有的想法都放在垂直中心div上。在最大宽度中，您可以设置最大宽度的大小。 Div总是处于垂直和水平位置的中心位置。它会在手机或其他小屏幕上看起来不错。此致敬礼。

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>

CSS背景图像调整大小

相关推荐