Solved

floating background

Posted on 2013-05-13
5
249 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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying 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

In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…

679 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