Results 1 to 4 of 4

Thread: tiled and fixed image background?

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default tiled and fixed image background?

    I am trying to add a fixed image centered behind the text of my page but in front of the tiled background. Is there a way to do this?

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    it would need to be inside another element on the page if you are already using a tiled background for "body". You could use a div as a wrapper for all the content on your site and place the background image in that, or if you knew exactly where you wanted the image to show up then you could just create a div with absolute positioning, specify the "top" and "left" and place the image inside it. Also, when you say "fixed" do you mean an image that will stay within the screen at all times no matter how far down or over the user scrolls? If not, then that is not "fixed", that would just be absolute.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes when I said fixed I meant it would stay in the middle of the screen no matter how much scrolling was done.

    The idea was to have a watermark style semi-transparent png in the background and use a tiled image instead of a generic color underneath. I've tried CSS but the static image ends up cropped and in the upper portion of the page instead of in the center.

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Where exactly do you want the image to show up? Here would be a few examples:

    Top Right Corner:
    Code:
    <style type="text/css">
    .watermark{
    height:150px;
    width:150px;
    background:url('images/watermark.png') no-repeat;
    position:fixed;
    top:10px;
    right:10px;
    z-index:0;
    }
    </style>
    
    <div class="watermark"></div>

    Top Left Corner:

    Code:
    <style type="text/css">
    .watermark{
    height:150px;
    width:150px;
    background:url('images/watermark.png') no-repeat;
    position:fixed;
    top:10px;
    left:10px;
    z-index:0;
    }
    </style>
    
    <div class="watermark"></div>

    Bottom Left Corner:

    Code:
    <style type="text/css">
    .watermark{
    height:150px;
    width:150px;
    background:url('images/watermark.png') no-repeat;
    position:fixed;
    bottom:10px;
    left:10px;
    z-index:0;
    }
    </style>
    
    <div class="watermark"></div>
    Bottom Right Corner:
    Code:
    <style type="text/css">
    .watermark{
    height:150px;
    width:150px;
    background:url('images/watermark.png') no-repeat;
    position:fixed;
    Bottom:10px;
    right:10px;
    z-index:0;
    }
    </style>
    
    <div class="watermark"></div>

    Hope this helped
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

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