CSS HTML How to make a larger image than div display in full in div

Question

So I have a div with a background image; this div can grow in height and width depending on content/size of space for the div.

But regardless I would like the background image to be 100% in size displayed, this is because the background image has borders around it, and I need those displayed for a button-like effect.

div.leadgen {
  background: url(/Website6/Styles/leadgen_center.png) repeat-x;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
}

<div class="leadgen">
 <h3>
  This is the title
 </h3>        
 This is the description
</div>

EDIT

#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;  
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;

}

This works for me in all browsers ! The only thing I need to figure out is in IE 7 and 8 I don't want to use background:url(/images/leadGen_bg2.png) no-repeat; because it seems to be doubling up.

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm — Tobi, Apr 25 '12 at 13:32

score 6 · Accepted Answer · edited May 23 '17 at 11:43

6

You can use the CSS property background-size which is available since CSS3:

background-size: 100% 100%;

See this StackOverflow thread for IE support.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 25 '12 at 13:32

John Conde

217,595
99
455
496

So there is no way to do it in IE7 and IE8 ? Because I would still need to support those – StevieB Apr 25 '12 at 13:36
See if any of [these answers](http://stackoverflow.com/questions/5895571/css-background-size-cover-in-internet-explorer-7) work for you. – John Conde Apr 25 '12 at 14:35
Updated wit answer the only thing I need to figure out is not to use background url in ie7 and ie8 – StevieB Apr 25 '12 at 15:01

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Check this out: Stretch and scale a CSS image in the background - with CSS only

If you want this technique to work on a div instead of the body, add position: relative; to the div's css.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 25 '12 at 13:32

Dutchie432

28,798
20
92
109

CSS HTML How to make a larger image than div display in full in div

2 Answers2