CODEWITHSUNDEEP
htmlcss
Tom Nolan
Tom Nolan

Reputation: 1957

Multiple Colors/Images in a background + Content

I have designed a website in photoshop that I would like to actually develop. I modeled the website off of http://illinoisstate.edu. Basically, I want the top gradient header, the middle image, and the content floating over the top. I tried a few different ways with various css styles and position types, but I cant seem to get the effect right. I tried researching and even downloading the site to see how they did it, but no luck. Does anyone know how to achieve that effect?

This link http://dev.connectionsquad.com shows what I have. I want that nasty colored div to be over the background divs, but when you shrink the size of the window I want the background to disappear and only focus on the content.

Upvotes: 0

Views: 106

Answers (2)

DanielX2010
DanielX2010

Reputation: 1908

create a div inside the body tag that will contain your background (let's say, ). Position it with relative position and define it's width and min-height. Inside it, put the different effects you want using other divs. Posistion these divs using position. Afterwards, create a second div inside body but outside the first div. Position it and put the content in this div.

It will look like this:

<body>
    <div class="background_wrapper">
        <div class="header"></div>
        <div class="midle_image"></div>
    </div>
    <div class="content_wrapper">
        More divs...
        content...
    </div>
</body>

EDIT: Use position in CSS to adjust the first wrapper, the header, the image and the second wrapper. I personally would use position:relative for the content wrapper and position:absolute for the background wrapper

Upvotes: 1

Raiyan
Raiyan

Reputation: 1687

My understanding is that the 'image in the middle' is background image of body. They adjusted the y position of background image to 232px to offset it from top. For the floating effect, box-shadow specified for a div with id 'body'.

I'm not sure about the second part of your question. If you could elaborate what is meant by the 'colored div', that would help. I used firebug to peek inside the code and css. You might like to do that too, if you haven't tried already. Hope this helps.

Upvotes: 0

Related Questions