Hello,
In my html page I have put a background image. Now I need a simple rectangular box, where I will put in my rest of the html stuff.
I need it something like the example webpage shown here. I am somehow able to put the background image, but I don't know how to create the white backgrounded space where rest of the html stuff is there
If you look at the source code and styling of that site you will notice that the background image is applied to the <body> and the "White Box" is just a <div> placed inside of the <body> as a child element. Here is an ultra simplified example I just made:
Code:
<html>
<head>
<title>Background Image eg</title>
<style type="text/css">
body {
background-image: url(bg.jpg);
}
#container {
width: 960px;
height: 400px;
margin: 0px auto;
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div id='container'>
I am a big white box on top of a background image.
</div>
</body>
</html>
hey!! In the container tag, I had put height as 1000px, but in that case the background image duplicates(I mean second images develops due to scrolling) how do I make sure that the image does not repeat itself
body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}
That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.
For a tiled image, change to:
Code:
body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}
Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".
Thanks for the so explanation. I have done that stuff, now I was actually playing with gradients as a background image(e-g msn.com or cricinfo.com). I got one image and I am tryng to use it as a gradient background image.
But it doesnot work. I used your directions as well as the one that I had done earlier but in both the cases the gradient image doesn't work as needed.
I am unable to send here a screenhot of the image neither can I upload it.
well in short I want to tiny image to stretch whole of my page. no matter how much scroll I need to add to the page.
Reply With Quote
Bookmarks