Solved

floating background

Posted on 2013-05-13
5
248 Views
Last Modified: 2013-05-22
I need to add a hex color to the background. the url of the site you see each row has different colors.

so the hex color for each row i need to stretch out the background color if the screen is larger than the website. so example if the first page has blue for one block then orange the next I need it to show along the side of each row. how would you suggest i do this using different hex colors for a background.?

thredagencydev.com
0
Comment
Question by:sevensnake77
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39165418
This does not make much sense to me, but if you post a link, I might get some idea of what you are referring to.

Cd&
0
 
LVL 1

Expert Comment

by:MattWohler
ID: 39173698
The way this site is structured, it will be challenging to create the desired effect you want.

So we all understand, it sounds like instead of having a black background he would like a solid color that extends 100% of the width of the page that corresponds with the background color of the content.


I would accomplish this by breaking each color block with a div, but if you inspect the elements, we'll notice that the div are really disorganized making this task possibly more difficult than re-designing the div structure.
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39180115
thanks MattWoler<< I was thinking maybe a background image for each page about 1 pixels if so how would I get the image to stretch from left to right. maybe in the body or the main div after.??
0
 
LVL 1

Accepted Solution

by:
MattWohler earned 500 total points
ID: 39181575
Yes you could create a 1px(width) image and a fixed height or you could just do a regular solid (HEX/RGB) Color.  The important thing is that you give it your div a fixed height.

Create a div for each section so it would look something like this:
<div class="blue">
   Content goes here
   etc etc lorem ipsum
</div>
<div class="green">
   More content goes here
   etc etc lorem ipsum
</div>

Open in new window

And the CSS if a solid would look like:
.blue {
    min-height: 500px;
    background: #68BEFC;
}
.green {
    min-height: 500px;
    background: #1EFA38;
}

Open in new window

If you wanted to use a 1px image it would look like:
.blue {
    min-height: 500px;
    background: url('images/blue-bg.jpg') repeat-x left top
}

Open in new window

0
 
LVL 9

Author Closing Comment

by:sevensnake77
ID: 39188747
tlks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question