Solved

floating background

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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
WordPress Header Issue 9 46
remove background quote mark from widget 6 52
Wordpress errors showing up, hacked? 4 34
Wordpress DB connection error 4 15
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
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 exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

777 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