Background image problem

Discussion in 'CSS' started by DanaB, Sep 21, 2008.

0
  1. #1
    Hi: I am a newbie to css. I am setting up a site with not tables. I am trying to use a background image as a drop shadow. I can get it positioned but when the browser is resize the bg image shifts position. I can provide a link if needed. Thanks.
     
    DanaB, Sep 21, 2008 IP
  2. blktallos

    blktallos Active Member

    Messages:
    314
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Whats the Link i will take a look?
     
    blktallos, Sep 21, 2008 IP
  3. DanaB

    DanaB Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    http://www.marinemammalcenter.org/new_index
    http://www.marinemammalcenter.org/new_index/styles.css
    Thanks.
     
    DanaB, Sep 21, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok, some tips (for somewhat unrelated stuffs : )

    1. You have a space before the Doctype. Doctype needs to begin at line 1, character 1. Otherwise? IE will act like it's fifteen years out of date. It's going into Quirks Mode, if you've happened to notice it's not acting like Firefux.

    2. You have waaaaay too much Javascript. Though that may be a personal opinion : )

    3. You may NOT have more than one unique ID per page:
    
<div id="wrapper">
<div id="header"><img src="images/header.jpg" alt="Header" width="897" height="94" /></div>
<div id="wrapper">
    Code (markup):
    No can has two id="wrapper"s on the same page. Classes, yes. Id's, no.

    Lastly, I couldn't see if there was an overall container, but if this were my page I'd have a div called "container" wrapping everything in the page (so, first child of the body) and make it a hair wider than the content inside. The background image will go on the container and since container will be centered and only a hair wider than the content (which will be prolly also centered if there's going to be a shadow on the right as well) and will stay with the content instead of floating on its own as a body background.
    

body {
  margin: 0;
  padding: 0;
  background-color: #2bbcbf;
  background-image: url(images/bg1.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 125px 2px;
    Code (markup):
    You've set that background image as fixed (to the viewport of the visitor) and set a specific background position. This would have worked if the main content wasn't centered (meaning if the whole site had had a fixed width) but in your case, move the background to a container (and maybe I missed it and one of the wrappers is the container which is centering everything...)

    If the first wrapper is doing the centering everything job, then move the background to that first wrapper (and change the name of the second wrapper to something else) instead.
     
    Stomme poes, Sep 22, 2008 IP