SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expandable content: background images?

    Hi all,

    I'm a relative newbie to CSS (so please forgive me if this is a rather daft question), so figured Sitepoint would be the best place to pick the brains of people with a wealth of experience.

    In short, I'm trying to achieve code which caters for expandable content.

    I've uploaded an image to help me try and explain my predicament but, unfortunately, rules forbid me to post the correct link. However, you should be able to see it if you copy and paste the following URL in your browser: img197.imageshack.us/img197/2298/picture7d.jpg

    Ideally, I'd like the light grey area to house expandable content, without such throwing my background image out of sync.

    Is it possible to place two background images on the page (for example, one at the top, another at the bottom, with the body colour the light grey), or is there an easier, more compliant way to achieve this?

    Please let me know if there is anything I can do to explain such better.

    Thank you, in advance, for your help.
    Last edited by R +; Jul 18, 2009 at 15:14.

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,745
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    No, so far in CSS, each object can only be assigned one background image, and that includes <body>.

    BUT... who says you only have to use one object ?

    Perhaps you can re-work your HTML in a way that allows you to have a <div> with one background image, on top of the <body> with the other. Then have the <div> house your data.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Shaun,

    Thank you for your response and suggestion - I'll give that a go.

    Would a more traditional method to achieve such an effect be to use 100&#37; widths?

  4. #4
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to achieve what I'm looking for without the use of a background image.

    The code itself may be a little backwards, but it does validate correctly.

    However, I'd love for someone to offer their opinion of whether or not my code is the most efficient way of achieving the desired result.

    For reference, here's the updated image link: img190.imageshack.us/img190/2261/picture3wdy.jpg

    Again, don't forget that this is my first attempt at piecing together a build from scratch.

    Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    
    html {
    	height: 100%;
    }
    
    body {
    	background: #000;
    	font: 100.1%/1.5 Arial, Helvetica, sans-serif;
    	padding: 0;
    	margin: 0;
    }
    
    /* Temporary */
    
    p {
    	color: #FFF;
    }
    
    /* Container */
    
    #container {
    	width: 100%;
    	margin: 0 auto;
    }
    
    /* Header */
    
    #header {
    	width: 100%;
    	background: #1a0200;
    }
    
    #header-width {
    	width: 920px;
    	margin: 0 auto;
    	height: 168px;
    	background: #1a0200 url(img/header-lighting.png);
    	background-repeat: no-repeat;
    }
    
    /* Homepage Specific Content */
    
    #homepage-content {
    	width: 100%;
    	background: #1d1d1d;
    	padding: 0;
    }
    
    #homepage-content-width {
    	width: 920px;
    	margin: 0 auto;
    }
    
    #box-1 {
    	float: left;
    	margin: 10px;
    	padding: 10px;
    	width: 265px;
    	min-height: 160px;
    	background-color: #111;
    }
    	
    #box-2 {
    	float: left;
    	margin: 10px;
    	padding: 10px;
    	width: 265px;
    	min-height: 160px;
    	background-color: #111;
    }
    
    #box-3 {
    	float: left;
    	margin: 10px;
    	padding: 10px;
    	width: 265px;
    	min-height: 160px;
    	background-color: #111;
    }
    
    /* Navigation */
    
    #menu {
    	clear: both;
    	width: 100%;
    	height: 45px;
    	background: #370602;
    	border-style: solid;
    	border-color: #1a0200;
    	border-width: 6px 0 6px 0;
    }
    
    #menu-width {
    	width: 920px;
    	margin: 0 auto;
    
    }
    
    /* Footer */
    
    #footer {
    	width: 100%;
    	height: 100%;
    	background: #000;
    }
    
    #footer-width {
    	width: 920px;
    	margin: 0 auto;
    	background: #000 url(img/footer-shot.jpg);
    	background-repeat: no-repeat;
    	height: 289px;
    }
    
    /* Misc. */
    
    .clearboth {
    	clear: both;
    	width: 0px;
    	height: 0px;
    	margin: 0px;
    	}
    
    </style>
    
    </head>
    <body>
    <div id="container">
    <div id="header"><div id="header-width"></div></div>
    <div id="homepage-content"><div id="homepage-content-width">
    <div id="box-1">P</div>
    <div id="box-2">P</div>
    <div id="box-3">P</div>
    <div class="clearboth"></div></div></div>
    <div id="menu"><div id="menu-width">P</div></div>
    <div id="footer"><div id="footer-width">P</div></div>
    
    </div>
    </body>
    
    </html>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I would put the background image (or whatever the other parts of it are on) on the <body> element and then put the black background on the #container div to make it expand all the way down.

    You are aware you have no doctype?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You are aware you have no doctype?
    Very aware, yes.

    Sitepoint wouldn't let me post it as part of the code, as it constitutes a link.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R + View Post
    I
    However, I'd love for someone to offer their opinion of whether or not my code is the most efficient way of achieving the desired result.
    Hi,

    It doesn't look too bad and if you want expandable backgrounds behind your centred content then you do need the nested div approach.

    I would remove the height:100% from the footer a sit won;t do what you expect. You will rarely (if ever) use height:100% on any elements in your page (apart from html,body,table ( and apart for ie6 where it is used for min-height)).

    If you set 100% height and assuming there is parent that will provide height for this to work then your element will never grow with content as it will be constrained to its original 100% height. Luckily on most cases the height:100% fails because the parent is auto height and the height also reverts to auto.

    The only other comment is that you could do away with the clearer and apply overflow:hidden to the parent instead or use one of the other clearing techniques to save some html.

    Lastly, who turned the lights off in your layout? I couldn't see a thing

  8. #8
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css properties width and css height to define the measure of the elements. Equal to the measure of the background image for the empty elements and the height of the background image for the element span. The width for this element will not be specified as it will be based on the width of its text content.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •