...

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



CrashNsink
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:

tracknut
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?

Dave

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

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


Doesn't work =/

All these my codes :

HTML:


<!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:


* {
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;
}

tracknut
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.

Dave

CrashNsink
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