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

Question

how you are all well) is it possible to resize a image in a div background. my image is 350 x 80 need to resize to 300 x 70. yes i can use photoshop but will like to get those nice sharp pixels by resizing. PS I don't want to use tables etc.

my example below:

 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

• let the background contain the image and change the container size.

  This shall work.

Edit*

• I think you are looking for something like this.

   /*.............. 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>