View Full Version : Is there a way to make an image fill edge to edge of an browser ?

07-25-2012, 05:13 PM
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 :thumbsup:

07-25-2012, 07:03 PM
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?


07-25-2012, 11:02 PM
.classmy img {width: 100% auto;}

07-26-2012, 03:21 AM
.classmy img {width: 100% auto;}

Doesn't work =/

All these my codes :


<!doctype html>

<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() {


<div id="container">
<figure id="logo">
<img src="images/logo22.png" alt="Foodstant Delivery logo" width="" height="" />

<figure id="abtex">
<img src="images/abtex125.png" />

<div id="navbar">
<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>

< <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 id="htmlcaption" class="nivo-html-caption">
Chinese Cuisine ! <a href="#">a link</a>.

</div> -->

<figure id="footerBg">
<img src="images/BG_F_S1.png" alt="Footer Background" width="" height="" />


</footer> -->




* {
margin: 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');

margin: 0 auto;

#logo {
position: absolute;

#abtex {
position: absolute;


#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-top-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 {
padding-top: 10px;
padding-bottom: 10px;

#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;

#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;
border-radius: 10px;

a:active {
color: #918FBC;

a {

#navbar ul li.OP a {
padding-left: 10px;

#footerBg {
position: absolute;
width: 100% auto;

07-26-2012, 03:33 AM
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.


07-26-2012, 04:32 AM
Would a screenshot help ?

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

Topview of site (http://i418.photobucket.com/albums/pp270/ravenoz_bucket/topview1.png)

Bottom view (http://i418.photobucket.com/albums/pp270/ravenoz_bucket/btmview1.png)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum