Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Div with 100% height and width regardless of content

  1. #1
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default Div with 100% height and width regardless of content

    How do I get a div to stretch out to a full page width and height, and have the background image in the div expand or shrink with the page resize?
    An inline div is a freak of the web and should be beaten until it becomes a span

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Try this:
    <div style="position: absolute; left:0; top: 0; right:0; bottom:0; text-align: center" >
    <img src="http://static.giantbomb.com/uploads/scale_small/0/5768/657265-fred_flintstone.jpg" style="height: 100%;">
    </div>

    <div style="position: absolute; left: 0; top: 50%; width: 100%; z-index: 1; background: transparent; text-align: center; ">
    <span style="position: relative; background: red; color: white; padding: 10px; margin: auto">Hi Fred</span>
    </div>

  3. #3
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Any way to hide the img tag? was thinking about something like this...

    Code:
    #header-wrapper {
       position: absolute;
       left:0;
       top: 0;
       right:0;
       background: url(http://static.giantbomb.com/uploads/scale_small/0/5768/657265-fred_flintstone.jpg) no-repeat;
       bottom:0;
       text-align: center;
       height: 100%;
    }
    
    header {
       position: absolute; 
       left: 0; 
       top: 50%; 
       width: 100%;
       z-index: 1; 
    }
    
    header h1 {
       position: relative;
       background: red;
       color: white;
       padding: 10px;
       margin: auto;
    }
    HTML Code:
    <div id="header-wrapper">
         <header>
             <h1>Hi Fred</h1>
        </header>
    </div>
    An inline div is a freak of the web and should be beaten until it becomes a span

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

  5. #5
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    I know it doesn't, does the image have to be in an img tag to be able to shrink and expand? How could the code that I posted work so the image will?
    An inline div is a freak of the web and should be beaten until it becomes a span

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    I wouldn't know how to do it in a simple way without the image tag. Why don't you want the image tag?

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    The easiest way to resize would probably be to use background-size:cover;, on the html element
    Code:
    html {
    	background: url(img.jpg) center no-repeat fixed;
    	background-size: cover;
    }
    This wont work in IE8 or lower though, but it depends how much support you want to give.

    There are more methods here: http://css-tricks.com/perfect-full-p...kground-image/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by molendijk View Post
    I wouldn't know how to do it in a simple way without the image tag. Why don't you want the image tag?
    Its just for cleaner html code really.


    EDIT:
    I would like to have something done like this site , where they loaded the image in a article element

    Code:
     <article class="mainPicture" style="background-image:url(IMG/jpg/france-main-picture.jpg)">
                            <div class="fadeMainPicture"></div>
                            <div class="w990px">
                     ...
    then adjusted it in the stylesheet style.css:

    Code:
    .mainPicture {
        min-width: 990px;
        min-height: 800px;
        margin: 0 auto;
        background-position: center 0px;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        position: relative;
    }
    However I was unable to reproduce the same results
    Last edited by FrickenTrevor; 08-15-2014 at 12:00 AM.
    An inline div is a freak of the web and should be beaten until it becomes a span

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by FrickenTrevor View Post
    Its just for cleaner html code really, it works however. Thank you.
    Using or not using the image tag won't make the code more or less clean. So I think there's no principled reason not to use it.
    If you want to always use it on the whole page (the html element) you can use Beverleyh's code, without the image tag.
    But if you want to use it on the whole page (html element) or or parts of it (div element), use my code.
    Good luck.

  10. #10
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    159
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    I should point out I made an edit in the last post
    An inline div is a freak of the web and should be beaten until it becomes a span

Similar Threads

  1. width and height
    By EXCUSE in forum HTML
    Replies: 1
    Last Post: 11-17-2008, 05:29 PM
  2. Table width and height in IE and FF
    By chas in forum HTML
    Replies: 4
    Last Post: 07-24-2008, 01:35 PM
  3. Percentage Height and Width
    By hurry in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-28-2008, 06:25 AM
  4. inline css height/width
    By neilkw in forum CSS
    Replies: 0
    Last Post: 07-04-2006, 01:15 PM
  5. specifying Height and width for inline div
    By wishiwasageek in forum CSS
    Replies: 1
    Last Post: 08-31-2005, 02:45 PM

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
  •