Solved

floating background

Posted on 2013-05-13
5
246 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

What's this? As a volunteer Page Editor for Experts-Exchange.com, I have noticed that many authors also have blogs, and pull articles from their blogs to post at Experts-Exchange. I appreciate each author sharing their blog content with our site …
First things first, I say this in many of my articles, but in this one you can take it as fact. I am not in any way an expert when it comes to WordPress. I am strictly a user. I don't know the programming languages involved, and although I could pro…
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 add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

861 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

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now