www.webdeveloper.com
Results 1 to 7 of 7

Thread: Background Rectangular Shape

  1. #1
    Join Date
    May 2010
    Posts
    36

    Background Rectangular Shape

    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

    example is here http://www.foxtab.com/1.3/d/

    can anyone help me say how to put this rectangular shape on top of my background image.

    Thanks
    refhat

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    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>
    Good Luck!

  3. #3
    Join Date
    May 2010
    Posts
    36
    hey it works,

    A big thanks from my part!!!

  4. #4
    Join Date
    May 2010
    Posts
    36
    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

    thanks

  5. #5
    Join Date
    Jul 2009
    Posts
    184
    http://www.w3schools.com/css/tryit.a...peat_no-repeat

    They sum it all up pretty nicely.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,199
    In case w3schools.com wasn't too clear:

    Background Image Code:

    For the body tag example:
    Code:
    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".

  7. #7
    Join Date
    May 2010
    Posts
    36
    hey payne,

    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.
    Last edited by refhat; 07-02-2010 at 11:46 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles