dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Image size on screen

  1. #1
    Join Date
    Jan 2006
    Posts
    15

    Image size on screen

    I have a page i'm destining, on this page I've got a DIV header with a UL as a menu inside it, this will be 100% width and 100px high, contained in a centered 800px wide container.

    Under this I want an image, I want it full screen width and screen height to the bottom of my screen but showing my header.

    Under this I will have a a footer.

    This is the CSS I have between my header and footer. The image is the right size but my footer sits under my home DIV. Obviously this is wrong so how can I do this?

    HTML Code:
    <style>
    .home{
    	background-image:url(Images/bkgd2.jpg);
    	position:absolute;
    	bottom:0px;
    	top: 100px;
    	width:100%;
    }
    </style>       
    
    <div class="home">
    
    - 
    
    </div>

  2. #2
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,618
    That is wider than my phone.

  3. #3
    Join Date
    Jan 2006
    Posts
    15
    The point being?

  4. #4
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,618
    Since most folks use phone on the internet, the picture will be butchered.

    Examples:
    http://screensiz.es/
    .

  5. #5
    Join Date
    Nov 2017
    Posts
    5
    Hello, kiwis,
    Firstly you will have to take (top:0) after then you will have to take a height of image according to you. For exampleheight:100px.
    I hope your problem will be solved.
    eg:

    .home{
    background-image:url(Images/bkgd2.jpg);
    background-size: cover;
    position:absolute;
    bottom:0px;
    width:100%;
    height: 100px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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