0

i am developing website for one political party(not client,my own purpose) using wordpress software. i am modifying theme called fresh life by theme junkie. actually i am not a front end developer, but i am putting my max efforts to change the theme styles that matches to political party flag.

First of all, website which i am modifying styles is www.ysrcong.com. political party flag URL is http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg .

i am trying to put background color of left part of the web page with 2266BB , right part of the web page with 0FBD60 and middle part of the page with white color.middle part of the website width is 950px. there is no specific widths for left and right.

i have googled and found out one solution. solution i have implemented is , i have designed one image with colors 2266BB and 0FBD60 of same width and height and color 2266BB in left and other in right.

i have set that image as background in all webpages. seems working fine in majority browsers with some small issue. issues i am facing are

1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it  was  left some height and that part was filled with  background image

kindly please give me suggestions how to solve these two issues and also if any other effective solution to achieve this.

following code i have written.

html code
-------------------------
<body>
   <div id="bg"><img src="bg.png"  width="100%" height="100%" alt="">
   </div>
   <div id="#wrapper">
   webpage content goes here.
   </div>
</body>

styles i applied.
---------------------------------
body {
   height:100%; margin:0; padding:0;
}
html {
   height:100%;
}
#bg {
   position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
   background: #fff;
   margin: 0 auto 0px auto;
   padding: 10px 15px 0 15px;
   width: 950px;    
   position:relative; 
}
MAHESH
  • 11
  • 3

3 Answers3

0

For flexibility, I would personally use css gradients like these on the body :

background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left,  #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right,  #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */

You could then have a "background-image" fallback for old browsers.

BenPog
  • 251
  • 2
  • 7
0
  1. Delete the #bg div that you created for the background
  2. Create an image 1px high by 3000 + px wide. Split the image in half with the right and left side being teh colors that you want
  3. set the body tag in css to background: url(path/to/your/image) repeat-y center top;
  4. Celebrate, you are finished
ckaufman
  • 1,487
  • 9
  • 15
  • i am newbie in designing side. Please explain this point. Create an image 1px high by 3000 + px wide. what is mean by 3000+ px wide. i am creating image in ms paint. – MAHESH Mar 01 '12 at 18:06
  • Create a 2 color .gif image with a height of 1px and width of 3000px or more. Set this as the background of your body tag with the css given above. – ckaufman Mar 01 '12 at 18:10
  • its working great. thanks boss. i unable to fix second problem. kindly please suggest fix for that. – MAHESH Mar 01 '12 at 19:09
  • Are you trying to get the body portion (white) to be 100% of the screen height? If so you have two options. The easiest would be to modify the 3000px image that you created and include a 950px section of white in the center. You could also modify the CSS of your current layout by getting rid of the wrapper bottom margin and extra clear div below it. – ckaufman Mar 01 '12 at 20:00
0

My inclination would be to do something like this.

HTML

<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>

With the CSS

html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}

Link here: http://jsfiddle.net/folktrash/EQE6K/

folktrash
  • 176
  • 1
  • 11