1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS How to stretch a watermark/background in CSS?

Discussion in 'Web Development' started by lukesawyer, Dec 6, 2011.

  1. lukesawyer

    lukesawyer New Member

    I have the following on my css style sheet:

    .welcomebackground{
    background-image: url("hive2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff
    }

    img.transparent{
    filter:alpha(opacity=75);
    opacity:.75;
    }

    This is inside a table. I am trying to expand this to the entire table, but when I add width and height, nothing happens. I've tried other configurations that I have seen online, but it ends up moving the image all over the table, but not stretch it. What am I missing from the configuration above that will enable me to stretch the image to cover the whole table? Thanks in advance. :)
     
  2. Geoff Tyrer

    Geoff Tyrer Member

    Take a look at this article: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

    You might be able to apply the technique to your table.

    It seems you cannot use the background properties to stretch the image.

    What you do is use a regular img tag in your HTML to which you can apply width and height.

    And then you use relative positioning and a z-index to put your table on top of it.
     
  3. tomw

    tomw Member

    I think you can stretch the image. Can you post the entire codes or give us the link to the image in question?