- This topic is empty.
March 14, 2012 at 3:20 pm #37152
My colleges designers made a website design that looks like this: http://goo.gl/GV31v
Does it posible to repeat background to the left but keep the right side white?
Note that the page has a fixed width of 1000px, and that gray background has to fill all left side of the page.
Any help will be appreciated.
Sanya.March 14, 2012 at 4:04 pm #99087dfoggeParticipant
cant you just set the aside’s background-color to grey and the main content area’s background-color to white?
or am i misunderstanding something?March 14, 2012 at 5:26 pm #99095
The left background is not just a solid color – it has a gradient.
And my website has to be centered and with a fixed width.
Yes, I can set bg for aside, but what about rest of the space to the left of aside?March 14, 2012 at 5:37 pm #99096Paulie_DMember
If it’s a gradient why not use that and just stop it at 50%?March 14, 2012 at 5:42 pm #99099
It would be a huge png file, because you never know how big display width are.
Or what you mean by saying “stop it at 50%”?March 14, 2012 at 5:55 pm #99100dfoggeParticipant
i think paulie may be onto something here. try applying the gradient to the wrapper div.
to build your gradient i recommend you go here: http://www.colorzilla.com/gradient-editor/
here’s a screen grab of what i think you want: http://i.minus.com/i8yJaMpBaRGow.jpg
what you have to do is put a gray stop-marker on the left side, a white one on the right, and one of each right where you want the gray to end. in my example i put it at 40%.
and here’s the code the above screenshot generated:
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(top, #7a7a7a 0%, #a5a5a5 40%, #ffffff 40%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(40%,#a5a5a5), color-stop(40%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
one glaring issue is supporting older browsers. check here to see where you will run into problems: http://caniuse.com/css-gradientsMarch 14, 2012 at 6:05 pm #99102
Well… that’s interesting solution but it not works on old IEs and I have more complex background on the left which I was going to save as an image.March 15, 2012 at 9:04 am #99154Paulie_DMember
You say it’s a gradient…do you have a picture you could show us?
You would need to provide a fallback for IE
I can’t see why the image file would need to be huge as it only need to be a few pixels tall and you could just repeat it vertically.March 15, 2012 at 9:15 am #99155
Probably I did not explained my issue correctly, so you can’t understand what I need.
Basically, I need a centeredwith a fixed width and different backgrounds in the left and right.
And I guess I’ve found a solution http://jsfiddle.net/byYKE/
Here I can easily set different backgrounds for left and right divs.
Anyway, thanks for helping me.
- The forum ‘CSS’ is closed to new topics and replies.