Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

CSS - how to stretch background image to 100%?

I'm a CSS beginner, trying to built a website. How can I stretch my image so it would have the same width as my heading? It only partially fills my #heading box. It's also too big to use repeat-x function (it's width is about 3/4 of desired size and it would look weird if it repeats). Thanks in advance!

#heading{

background: url(r.jpg) no-repeat top #ffc;

background-color: darkred;

height: 55px;

margin: 0px;

padding: 0px 0px;

border-bottom: 1px solid #cccccc;

width: 100%;

text-align: center;

}

2 Answers

Relevance
  • 1 decade ago
    Favorite Answer

    Where you have "Width: 100%" try putting a discrete pixel value instead, like "Width: 120px"

    Change 120 for any value that suits.

    I'm assuming at this point that the width will remain fixed, and not scale with the page.

    Source(s): computer experience
  • 1 decade ago

    I suggest you use an image editor and resize the image to the correct size, you will get better results than stretching it in a browser.

Still have questions? Get your answers by asking now.