Home/ Questions/Q 8282215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:17:52+00:00

I have designed a website in photoshop that I would like to actually develop.

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0