Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

floating background

Posted on 2013-05-13
5
Medium Priority
?
280 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:Seven price
  • 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:Seven price
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 2000 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:Seven price
ID: 39188747
tlks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

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…
In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
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…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

773 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