/    Sign up×
Community /Pin to ProfileBookmark

I need my content to appear above a background but hide behind an image.

Hi

It looks like I got a bit ****y and sold a design to one of my clients that I am having trouble building.

Please take a look at the attached file so you can see what I am talking about.

  • 1.

    The web page’s height dynamically needs to expand vertically.

  • 2.

    The swirly design in the background has to stay at the bottom with the footer when the web page expands.

  • 3.

    The yellow area represents the place where I need to put content that will also expand vertically. It needs to stay behind the circle herb images and in front of the swirly design.

  • 4.

    The circle herb images can never move in position nor can the navigation.

  • Please go to the following URL and you can see what I have designed so far.

    [URL=”http://www.webskillsplus.com/massage/index.html”]www.webskillsplus.com/massage/index.html[/URL]

    Take a look at demo.css

    [CODE]html {
    background: #5e88a2 url(../img/dice_slice.jpg) repeat-x;
    }
    body {
    padding: 0;
    margin: 0;
    background: url(../img/bg.jpg) no-repeat center top;
    width: 100%;
    display: table;
    }
    .header {
    width: 960px;
    background: url(../img/header.jpg) no-repeat center top;
    height: 196px;
    }
    .footer {
    float: left;
    width: 960px;
    background-color: #b9b299;
    height: 86px;
    }
    .container_12 {
    height: 100%;
    background: url(../img/design.jpg) no-repeat center bottom;
    }[/CODE]

    I could make .container_12 solid white but it covers the circle herb images.

    to post a comment
    CSS

    4 Comments(s)

    Copy linkTweet thisAlerts:
    @bionoidFeb 01.2012 — When you say the herbs cannot move, does that mean the bottom ones as well, or does it mean they must just stay docked to their respective corners?

    I did a layout that basically does what you described if I interpreted it correctly.

    The styles are all inline at the moment, I usually move them out when I'm satisfied with the design.

    Hope it helps.
    Copy linkTweet thisAlerts:
    @MGuiseauthorFeb 01.2012 — Wow, I think you got it.

    I'm amazed. In my opinion this was a tall order and you came through perfectly.

    I think I did an awful job describing what I needed.

    Very much appreciated!!!
    Copy linkTweet thisAlerts:
    @MGuiseauthorFeb 13.2012 — Hi bionoid

    Everything seems to be working in the website but I have one problem.

    You can visit the website here http://www.discovermassagespa.com/

    [CODE]
    .circtop {
    position: absolute;
    left: -70px;
    top: 175px;
    z-index: 2;
    }
    .circbtm {
    position: absolute;
    right: -80px;
    top: 350px;
    z-index: 2;
    }
    [/CODE]


    I also attached an image so you can see what I am talking about.

    I want the ipad/iphone monitor/screen to not recognize the right circbtm.png. Rather I would like it to be half cut off like circtop.png. So that both sides of the web page extend all the way across the screen hiding half circbtm.png. I'm not sure how to fix this. Plus i seem to be loosing my gradient in the background.

    I just now noticed that the third paragraph has fallen to the left side of the screen. I believe I can fix that.

    Anyway, thanks for your help.
    Copy linkTweet thisAlerts:
    @bionoidFeb 13.2012 — I'm not sure how to solve all the problems you have as I do not own any Apple devices or run their software, but I found that adding an extra layer to hide content out of the viewport seemed to fix some things:

    [CODE][COLOR="Red"]<div style="overflow: hidden;">[/COLOR]
    <div class="wrapper">

    ...

    </div>
    [COLOR="red"]</div>[/COLOR][/CODE]


    Hope that helps.
    ×

    Success!

    Help @MGuise spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...