homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Show entire background image
webfoo

5+ Year Member



 
Msg#: 4328945 posted 8:12 pm on Jun 21, 2011 (gmt 0)

Is there a way to force a div into being at least as large as it's background image? The background image could be a different image each time, so there's no telling what the exact dimensions will be.

I figured I'd use a min-height to accomplish this, but what do I set it to?!? It isn't the same measure every time!

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4328945 posted 10:07 pm on Jun 21, 2011 (gmt 0)

Hhhmmm, I don't think you can do this with CSS. I could perhaps imagine a JavaScript workaround?!

How are you setting the background-image to begin with?

webfoo

5+ Year Member



 
Msg#: 4328945 posted 10:30 pm on Jun 21, 2011 (gmt 0)

The background image is set like this:
<div style="background-image: bgimage.php; background-repeat: no-repeat;">
DIV CONTENTS GO HERE
</div>

the PHP file is generating a background image, which will have different dimensions every time.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4328945 posted 11:20 pm on Jun 21, 2011 (gmt 0)

The CSS doesn't know how big the background is. Foreground, of course, would be no problem: unless you tell it otherwise, the container will expand to fit what it's holding. If only our clothes, garages and toolboxes could do the same :(

So your basic choices are to use javascript to get the right-here-and-now-value, or to set the div height to the largest value it could possibly be. Which would leave you with an unattractive gap at the bottom. Degree of unattractiveness would in turn depend on just how wide a range of heights you're dealing with. Is the background image completely out of your control?

webfoo

5+ Year Member



 
Msg#: 4328945 posted 11:29 pm on Jun 21, 2011 (gmt 0)

The range of image sizes is not completely out of my control, but it is too large of a range to simply set the div size to the highest possible value. Plus, sometimes there will be no background image at all, and the div simply needs to contain its contents.

I'm thinking JavaScript is the way to go here. How would this be best done?

webfoo

5+ Year Member



 
Msg#: 4328945 posted 11:31 pm on Jun 21, 2011 (gmt 0)

correction on the snippet I posted earlier, should say:
background-image: url('bgimage.php');
pokra



 
Msg#: 4328945 posted 11:54 pm on Jun 21, 2011 (gmt 0)

If my understanding is right, you can also do this:

<div>
<img src="<?php ....; ?>" alt="" style="position: absolute;"/>
<div style="position: relative;">CONTENT HERE</div>
</div>

And maybe some padding on the CONTENT AREA.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4328945 posted 9:23 am on Jun 22, 2011 (gmt 0)

If you are writing your page with PHP (your file has a .php extension), which you would need to be doing in order to implement @pokra's solution (since it escapes to PHP) then you might also be able to write out the styled dimensions of the container/image as well at the same time. No JavaScript required. This would be the preferred solution. To be honest, I had assumed that this was not the case.

May be a background-image isn't the correct tool here and an absolutely positioned IMG (positioned behind other content), as in @pokra's solution would be better? This could be altered to simply:
<img src="bgimage.php" alt="" style="position: absolute;">

Which doesn't rely on the actual page being rendered by PHP.

How does bgimage.php work? Does it return a different image on every request? Or do you have some control over this? If this always returns a different image then even a JavaScript solution is going to be tricky?!

(1) I think, in order to do this with JavaScript you would need to load the same image in a hidden IMG element. JavaScript can then examine the dimensions of this IMG element once loaded and then set the dimensions of the DIV container that contains the background-image. Would people agree? Or is there a better JavaScript method?

(2) Or, may be... load the image in a hidden IMG element (nothing is currently set as the background-image of the DIV container). Get the dimensions of this image (as above) and then set the dimensions AND background-image of your DIV container to the same as the IMG element. Not that this is possible though?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved