www.webdeveloper.com
Results 1 to 3 of 3

Thread: using a washed out background image for content page

  1. #1
    Join Date
    Apr 2012
    Posts
    7

    using a washed out background image for content page

    I am using dreaweaver to build a site i would like to have a washed out image as the background on some pages.
    can any one tell me how this could be posssibly done.
    one of the things i dont want to happen is to have a large image as the back ground making the website slow to load.

    here is a example of one on another site http://www.csg.co.uk/index.php

  2. #2
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    1. You obviously need an image for background - as for its size, it depends on the image quality (for JPEG you can usually select this while saving). You may also load image with ajax just after page is loaded, though I do not think it is necessary.

    2. One of the ways to get image "washed out" is to set its half-transparent. Google for "opacity" css style. (here minor problem with IE because of which I could not simply write the CSS rule.

    3. As for setting background image - I believe there are several ways, for example use image inserted into BODY, with styles "position: absolute; width: 100%; height: 100%; z-index: -100;"

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    1) You can set your background image with CSS: CSS Transparency Settings for All Browsers

    2) Or, you can use a good graphics editor and set the image itself with the percentage of opacity you wish to use.

    3) 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 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".

Thread Information

Users Browsing this Thread

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

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