0

I'm trying to resize a background image so that it retains 100% of height AND width of its parent element, which is a text area. I'd like the image to adjust and change aspect ratio dynamically, just like the text area. I have the following CSS, the html is just a textarea tag.

textarea {
margin-left: 50px;
margin-top: 50px;
width: 500px;
height: 100px;
background: url(http://gfx9.com/images/contents/b/e/beautiful-cartoon-landscapes-vector-set-14-free0.jpg) no-repeat;
background-size:100%;
border-radius: 5px

}

With this code the image resizes horizontally, but I want it to resize both horizontally and vertically, filling all the white space in the area.

Hope someone can come up with a solution.

3
  • 2
    background-size: cover; or background-size: 100% 100%;
    – devqon
    Dec 31, 2014 at 11:15
  • Doesn't work with cover, the image overflows out of the area, but it does with 100% 100%. I didn't know you could specify two values for background-size. Thanks for the fast solution.
    – SoKeT
    Dec 31, 2014 at 11:21
  • @devqon please add your suggestion as answer so that SoKeT can select it as correct answer. Dec 31, 2014 at 11:22

1 Answer 1

2

You need to specify two values, since right now it's only catching the first (which is width). Like this:

div {
    background-size: 100% 100%;
}

You can also use px if you need to be specific. Additionally, there is another value called cover which will scale the background image to be as large as possible.

1
  • Welcome to StackOverflow! You may not be aware that, when you have multiline code, you can display it as a code block with syntax highlighting instead of as inline code. See the help center for more info.
    – Oriol
    Jan 1, 2015 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.