Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Is there a way to make an image fill edge to edge of an browser ?

    I have an image of size 1280x800 meant as the footer image.

    However, the image doesn't fill the whole bottom area of the site edge to edge as what I wanted.

    Is there any method to make the image fill edge to edge at the bottom of the page within a browser ?

    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    We'd need to see the site to diagnose the problem, yes you certainly can use an image across the whole browser. Perhaps there are some stray margins or padding keeping it narrower than you expect?

    Dave

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Code:
    .classmy img {width: 100% auto;}

  • #4
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Code:
    .classmy img {width: 100% auto;}
    Doesn't work =/

    All these my codes :

    HTML:

    Code:
    <!doctype html>
    
    	<html>
    		<head>
    			<meta charset="UTF-8"/>
    			<title> Foodstant Delivery </title>
    
    			<link rel="stylesheet" type="text/css" media="screen" href="default2.css"  />
    			<link rel="stylesheet" type="text/css" media="screen" href="nivo-slider.css" />
    			<link rel="stylesheet" type="text/css" media="screen" href="style.css"  /> 
    			<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    			<link rel="shortcut icon" href="images/favicon.ico" />
    
    			< <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    	    	<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
    	    	<script type="text/javascript">
    	    	$(window).load(function() {
    	        $('#slider').nivoSlider();
    	    	});
    	    	</script> 
    
    		</head>
    
    	<body>
    		<div id="container">
    			<figure id="logo"> 
    				<img src="images/logo22.png" alt="Foodstant Delivery logo" width="" height="" />
    			</figure>	
    
    			<figure id="abtex">
    				<img src="images/abtex125.png" />
    			</figure>	
    			
    			<div id="navbar">
    				<ul>
    					<li class="OP" id="OPM1"><img src="images/order.png"   /><a  href="Orders.html">Orders</a></li>
    					<li class="OP" id="OPM"><img src="images/menupic3.png" /><a  href="Menu.html">Menu</a></li>
    					<li class="OP"><img src="images/contact.png"  /><a href="ContactUs.html">Contact</a></li>
    					<li class="OP"><img src="images/Pen.png"  /><a href="Jobs.html" target="_blank">About Us</a></li>
    					<li class="OP"><img src="images/pin.png"   /><a  href="TC.html">Jobs</a></li>
    				</ul>	
    			</div>
    
    			 < <div id="wrapper">
    			<div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/slideshow1.jpg" data-thumb="images/toystory.jpg" alt="" />
                    <img src="images/slideshow21.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
                    <img src="images/slideshow31.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                    <img src="images/slideshow41.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
                </div>
                <div id="htmlcaption" class="nivo-html-caption">
                    Chinese Cuisine ! <a href="#">a link</a>. 
                </div> 
    
            </div> 
            </div> -->
    		</div>
    			 
    			 <footer>
    				<figure id="footerBg">
    					<img src="images/BG_F_S1.png" alt="Footer Background" width="" height="" />
    
    				</figure>		
    
    			</footer> -->
    
    	</body>	
    
    	</html>
    CSS:
    Code:
    * {
    	margin: 0;
    	padding:0;
    }
    
    
    body { 
    	background-image: url('images/BG-W1.png');
    
    	font-family: 'Comic Sans MS',Verdana,Helvetica,'Courier New',sans-serif;
    }
    
    @font-face {
    	font-family: 'Conv_LITHOSPRO-REGULAR';
    	src: url('fonts/LITHOSPRO-REGULAR.eot');
    	src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
    }
    
    
    #container{
    	max-width:1050px;
    	margin: 0 auto; 
    }
    
    #logo {
    	position: absolute;
    	top:-350px;
    	left:-350px;
    }
    
    #abtex {
    	position: absolute;
    	top:-100px;
    	left:400px;
    
    }
    
    #navbar {
    	background: rgb(246,248,249); /* Old browsers */
    	background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    
    	border-top-left-radius: 10px;
    	border-bottom-left-radius:10px;
    	border-top-right-radius: 10px; 
    	border-bottom-right-radius:10px;
    
    	position: absolute;
    	top: 170px;
    	left: 150px;
    	width: 960px;
    	
    	font-size: 26px;
    	font-family: 'Conv_LITHOSPRO-REGULAR';
    
    	box-shadow: 3px 5px 10px  #888888;
    	
    }
    #navbar ul {
    	list-style-position:inside;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    
    
    #navbar ul li {		
    		display: inline;
    		padding:0 20px 0px 0px; 
    		margin-bottom: 10px;
    		list-style-type:disc;
    	}
    		
    #navbar ul li.OP {
    		/*list-style-image:url('images/order.png'); */
    		padding-left: 20px;
    		
    }	
    
    #navbar ul li.OP img {
    	vertical-align: middle; 
    }
    
    
    }
    
    a:link {
      color: #EF174A;
      }
    
    a:visited {
      color: #BF4100;
      }
    
    a:hover {
      color: black;
      background-color:#D2D2D2;
      border-radius: 10px;
      }
    
    a:active {
      color: #918FBC;
      }	
    
    a {
    	text-decoration:none;
    }  
    
    #navbar ul li.OP a {
    	padding-left: 10px;
    }
    
    #footerBg {
    	position: absolute;
    	bottom:-500px;
    	width: 100% auto;
    }

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Do you have the site up anywhere? We don't have your images and would have to build the site to see what you're seeing.

    Dave

  • #6
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Would a screenshot help ?

    Because I am doing this for a school project, so I don't host the site =/ .

    Topview of site

    Bottom view
    Last edited by CrashNsink; 07-26-2012 at 04:38 AM.


  •  

    Posting Permissions

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