CSS 背景图像调整大小

Question

I would like it so that when you resize the screen it cuts off the image from the edges so that the text stays in the same spot on the image.我希望这样当您调整屏幕大小时，它会从边缘切掉图像，以便文本保持在图像上的同一位置。

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

Here is the JSFiddle for my site: https://jsfiddle.net/bnhvnnL7/这是我网站的 JSFiddle： https ://jsfiddle.net/bnhvnnL7/

Thanks!谢谢！

Answer 1

You can add background-position: center;您可以添加background-position: center; to your .banner div:到您的 .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 https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 2

Maybe this can help you.也许这可以帮助你。 I put all thinks to the vertical center div.我把所有的想法都放在垂直中心的 div 上。 In max-width you can set the size of max width you wonna.在 max-width 中，您可以设置您想要的最大宽度的大小。 Div is always in center of vertical and horizontal position. Div 始终处于垂直和水平位置的中心。 It will look good on phone or other small screen.在手机或其他小屏幕上看起来不错。 Regards.问候。

 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 背景图像调整大小

问题描述

2 个解决方案

解决方案1
0 2016-04-26 20:14:12

解决方案2
0 2016-04-26 20:28:24

CSS 背景图像调整大小

问题描述

2 个解决方案

解决方案1 0 2016-04-26 20:14:12

解决方案2 0 2016-04-26 20:28:24

解决方案1
0 2016-04-26 20:14:12

解决方案2
0 2016-04-26 20:28:24