HTML/CSS Design for the Background [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need a help regarding the background of the website, below are the details I want to know:
Different gradient background on left and right of the website (It should work also on all the IE Browser).
How will I do that using the HTML/CSS?
Please help. Thanks!

Answer 1

If you want it to work on older browsers, you could write something like this:
http://jsfiddle.net/ftcjZ/2/
This is more complicated html - it all depands on what exact browser do you need to run this on.
CSS:
.bg-left { background: url('http://cdn.imghack.se/images/3be5ae39376f069c0f49dd0cf09e74c7.png') top left no-repeat; }
.bg-right { padding: 0 118px 0 125px; background: url('http://cdn.imghack.se/images/ae53c28777043687b9a110e867798cb5.png') top right no-repeat; }
.main-content { height: 800px; background-color: white; }
HTML:
<div class="bg-left">
<div class="bg-right">
<div class="main-content">
</div>
</div>
</div>
EDIT: I updated the code changing margin for main container to padding in .bg-right as this is more reliable solution.

Answer 2

Generate your body background here
Create centered container div with and transparent curtain image background
Create centered website-container div in container div 100% height and set the background to the grey color
Good luck.
Clarification for Quentin's comments: use diagonal gradient:
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(135deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Answer 3

this is method by which you can make background texture through CSS
background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;
note:you can change the value of polarity and linearity and then define different background throughout the page through background-position
Also check this out.-->http://lea.verou.me/css3patterns/
Its also possible to use image as a gradient base. open this noisetexturegenerator.com and try below thing
body { background-image:url('gradient image'); background-repeat:repeat-x; }

Answer 4

One best idea to work in all the browsers and most of the resolutions is, using a huge image, with a separation in the middle, having a width of 2048 and make the vertical scrolling fixed.
This would work in all the browsers.
body {background: url("huge-image.png") center top no-repeat;}
To all who say bg will be big.
An image of resolution: 19488 x 3552 and the size is just 51 KB. Check it out:
(source: znate.ru)

Answer 5

You can use css-gradient. This should work with all browsers.
background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.16, rgb(232,232,232)),
color-stop(0.58, rgb(122,122,122)),
color-stop(0.79, rgb(115,115,115))
);
Older versions of IE don't support gradient, so you have to make second div container, which will be transparent on other browsers.
And define new css for older versions of IE, e.g.:
<!--[if lte IE 8]>
<style>
.diaggradientback
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}
.diaggradientfront
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}
</style>
<![endif]-->