CSS - Stretch Image To 100% And Center Page

Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally.


Heres what I have:
Code:

<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);

}
-->
</style>

Like that it will only display half of the gradient if the gradient is longer than 50% of the page.

I want it to stretch or shrink the image so that the whole gradient is displayed.

I tried using the background-size: 100% attribute but it diddnt do anything :-\

Thanks for any help.

Hi,

Just wondering if anyone can tell me how i would go about stretching a background image for my website so as it stretches with different page sizes and resolutions an all the rest

Here's my CSS
Code:

 #header {
        position: fixed;
        left: 0;
        width: 100%;
        height: 125px;
        top: 0;
        background-color: #ccffcc;
		background-image: url(images/topbackground2.jpg);
		}

Here's my HTML
Code:

<div id="header" >
<img src="images/spacefiller.jpg" align="left">
<a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a >
<img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; ">
</div>

The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions.

Hi there,
I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page.

At this point it's probably easiest to see what I mean by taking a look for yourself-

http://www.seb.webege.com/paintings/gallery

If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen.

I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem.

Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated.

Many thanks,

Nick

I got this WP style, and I edited it quite a bit.


Code:

#menu {
	clear: right;
	float: left;
	position: relative;
	padding:0 10px 0 10px;
	margin:0 0 0 34px;
	width: 160px;
	/* border-left: 1px solid #bbaf95;
	border-right: 1px solid #bbaf95; */
	background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}

The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one.

Check it out: http://randomized.us

Thanks in advance.

I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas?

It's pretty hideous - it's a test, but here's the url:
http://www.mahec.net/default3.aspx

Here's the code:
Code:

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
    position:relative;
    width:90%;
    padding:25px 25px 25px 25px; 
    z-index:1;
    background-color:#ffffff;
    color:#000000;
    opacity:0.6;
    filter: alpha(opacity=60);
    }
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>

<p>paragraph text</p>

    </div>
    </form>
</body>
</html> 
      

Hey

I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory.

Code:

/* page defaults */
body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAEAEA;
}

/* Layout divs */
#container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	position: static;
	left: 40px;
	top: 12px;
	padding: 0px;
	width: 800px;
	border-right: #003366 1px solid;
	border-left: #003366 1px solid;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	text-align:left;
	background-color: #FFFFFF;
}
#title {
	background-image: url(images/saved_title.gif);
	margin-top: 10px;
	background-repeat: no-repeat;
	height: 150px;
	border-top-color: #000000;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: #000000;
}
#navbar {
	background-image: url(images/navbar.gif);
	background-repeat: no-repeat;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 5px;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right: 1px solid black;
	padding: 5px;
	background-color: #CCCFFF;
	width: 230px;
	height: 100%;
	margin: 0;
	float: left;
	font-size: medium;
}
#content {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 10px;
	padding-top: 40px;
	background-image: url(images/content.gif);
	background-repeat: no-repeat;
	background-position: -239px 0px;
	background-color: #FFFFFF;
	height: auto;
	width: 539px;
}
#footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	padding: 10px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	width: 780px;
	height: 25px;
	text-align: center;
}

/* Links */
a:link {
	color: #006699;
}
a:visited {
	color: #006699;
}
a:hover {
	color: #006699;
	text-decoration: none;
}
a:active {
	color: #006699;
}

/* elements */
#navwin h2 {
	font-size: large;
	display: block;
}

#navwin ul {}

thanks

Matt

Hello everybody!

I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS:

HTML (I only included the very basic structure):

<html>
<body>
<div class="container">
<div id="content">
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
</div>
</div>
</body>
</html>`

CSS:

html, body {
height: 100%;
font-family: Arial;
font-size: 10px;
color: #000000;
background: #FFF url(../../images/body.png) no-repeat center 40px;
margin: 0;
position: relative;}

.container {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}

#content {
width: 939px;
min-height: 100%;
position: relative;
top: 210px;
left: 6px;
box-shadow: 0px 0px 8px #666;
-moz-box-shadow: 0px 0px 8px #666;
-webkit-box-shadow: 0px 0px 8px #666;
background-color: #FFF;}

I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies?

Thank you so much in advance for your help.

I am trying to center this entire page, and it does show up centered in IE; however, after checking with BrowserShots.org, in all browsers other than IE, the header image is centered, but the rest is aligned on the left side....??!!

Here is the page: http://www.georgiaspinal.com/indexTESTBR2.html

Here is the CSS file I am using:

Code:

body {margin:25px; font:12px Verdana, Arial, Helvetica; }
* {padding:0; margin:0}

#wrapper {
  text-align: center;
  width: 770px;
  margin-left: auto;
  margin-right: auto;
}


.hidden { display: none; }
.unhidden { display: block; }
<div id="article" class="hidden">

Thanks for any help here!!!

I have a div sitting on a html page that will be included in the main page.

I include this page into a table and I would like the div to be centered horizontally inside the table cell. It isn't working for me at the moment. Am I doing something wrong?

Here is what I have so far:
Code:

#mybox{
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	padding: 5px;
	width: 400px;
	left-margin:auto;
	right-margin:auto;
}

Brad.

Is there a way to center the entire page using CSS?

Reidy

I have a single column layout with a fixed width (say, 700 px), centered in the window, composed of header, body, and footer divs in a wrapper div. I would like background images, left and right of the center column (two images, because they sort of fade up to the edge of the centerd div).

How is this done?

I know there has to be an easy answer to this question but I'm at a loss!

How do I center an image using CSS?

Thanks!
BB

I'm trying to center a gridview on a page. Pretty straightforward. I just don't understand why this gridview will not center on the page. I have no other css. They instructions are left aligned fine.

This is the code I have for the css.

Code:

#mid
{
	text-align:center;
}
p.instr
{
	text-align:left;
	color:Silver;
}

<div id="maincontainer">
	<div id="mid">
            <p class="instr">bunch of instructions</p>
		<asp:Panel ID="pnlMainMenu" runat="server">
			<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1">
			</asp:GridView>       
		</asp:Panel>    
    </div>
</div>