CSS Background Image

I have a div with a background image.  I am trying to maintain a responsive design.  However, the background image will not show without an actual height.  Any ideas or work arounds?

#in_depth {
	display:block;
	background-image:url(../img/products/icons/in-depth.jpg);
	background-repeat:no-repeat;
	min-width:50%; 
	min-height:50%;
	float:left;
	background-size:100%;
}

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
 
Altin BardhiConnect With a Mentor Software EngineerCommented:
background : url("image.jpg") no-repeat center; or left top
Or
background-position: center; or left top
0
 
Altin BardhiSoftware EngineerCommented:
Try:

Height:100%; ie
Overflow:hidden; ff
0
 
rgranlundAuthor Commented:
that did not work
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
LZ1Commented:
I'm not sure what your background image is or how it's being displayed, but you may want to include a responsive background as well:
http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/
0
 
LZ1Commented:
Here is a much better resource:
http://www.css3.info/preview/background-size/
0
 
Altin BardhiSoftware EngineerCommented:
Try to define the backround-position
0
 
nickinthoozCommented:
#in_depth {
	display:block;
	background:url('../img/products/icons/in-depth.jpg') no-repeat;
	min-width:50%; 
	min-height:50%;
	float:left;
	overflow: hidden;
}

Open in new window


A div will not adjust to your background size.  If you have a background image that is 300 x 300 and you only have the letter "a" inside your div, your div will collapse to the size of the "a" unless you specify a height and width. We could help a lot more if we knew what your background image was and also what is inside the div.

To see what I'm saying, use this fiddle example, take the height and width out of the div and hit run, and you'll see what I'm talking about.

http://jsfiddle.net/eZhAH/1/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.