如何在css/div容器中调整背景图像的大小

Question

一切都很好(是否可以在div背景中调整图像的大小。我的图片是350 x 80需要调整大小到300 x 70。是的，我可以使用photoshop，但我想通过调整大小来获得那些漂亮的清晰像素。PS我不想使用表格等

我下面的例子：

body {
background-color: #6B6B6B;
font-family: Arial;
color: darkgrey;
font-size: 12px;
line-height: .2;
letter-spacing: .5px;
}
/*.............. info ..............*/

.info {
position: fixed;
top: 30px;
left: 30px;
grid-template-columns: 60px 300px;
display: grid;
}

<div class="info" align="center">
<div><img src="http://wizzfree.com/pix/profile.png" class="bevel2" width="60" height="60"/></div>
<div style="background-image: url('http://wizzfree.com/pix/bubble.png'); width="300" height="70";"><p>chat text some chat text here some text<p>here some chat text here some text here some<p>chat text here some text here some chat text<p>chat text here some text here some chat text</div>
</div>

Answer 1

• 让背景包含图像并更改容器大小。

  这将起作用。

编辑*

• 我想你在找这样的东西。

  /*.............. info ..............*/
  :root {
  --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --msger-bg: #fff;
  --border: 2px solid #ddd;
  --right-msg-bg: #fa6695;
  }
  html {
  box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  }
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: var(--body-bg);
  font-family: Helvetica, sans-serif;
  }
  .msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 867px;
  margin: 25px 10px;
  height: calc(100% - 50px);
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  }
  
  .msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  }
  .left-msg .msg-bubble {
  border-bottom-left-radius: 0;
  }
  .msg-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  margin: 0 0 0 10px;
  }
  .msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 15px;
  background: var(--left-msg-bg);
  border-bottom-left-radius: 0;
  background: var(--right-msg-bg);
  color: #fff;
  border-bottom-right-radius: 0;
  }
  
  .msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  }
  .msg-info-name {
  margin-right: 10px;
  font-weight: bold;
  }
  
  .msg-info-time {
  font-size: 0.85em;
  }
  

  <main class="msger-chat">
  <div class="msg left-msg">
  <div
  class="msg-img"
  style="background-image: url(http://wizzfree.com/pix/profile.png)"
  ></div>
  <div class="msg-bubble">
  <div class="msg-info">
  <div class="msg-info-name">Yummi</div>
  <div class="msg-info-time">12:45</div>
  </div>
  <div class="msg-text">
  Hi, I suppose you were trying to build something like this and I 
  wish this works. The background should resize to your text 
  size and I wish this helps you. * Try changing this text *
  </div>
  </div>
  </div>
  </main>