HTML/CSS Design for the Background

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!

enter image description here

So you want a solution that will work on IE 1.0+. Good luck with that. — BLaZuRE, Jun 26 '13 at 07:23
I used this before for the background, but there's a problem always: html {background:url(../images/bg-right.png) top right repeat-y;} body{font-family:Arial; font-size:12px; background:url(../images/bg-left.png) top left repeat-y;} — JoseTheDev, Jun 26 '13 at 07:24
IE only worth to download firefox, chrome, etc... This is problem in IE. — A. M. Mérida, Jun 26 '13 at 07:24
@AntonioM.Mérida — Most people have to build websites for the public at large, not just for themselves. Our opinions about the quality of browsers don't really matter. — Quentin, Jun 26 '13 at 07:25

Lucas · Answer 1 · 2013-06-26T07:49:38.353

2

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.

edited Jun 26 '13 at 07:49

answered Jun 26 '13 at 07:41

Lucas

2,587
1
18
17

2

not supported in Safari. – Ashish Sharma Jun 26 '13 at 07:49
Hi Lucas, this is a good idea but I think this will not work well if you tried minimize the browser :) – JoseTheDev Jun 26 '13 at 07:50

score 0 · Answer 2 · edited Sep 04 '19 at 11:14

0

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)}

edited Sep 04 '19 at 11:14

Glorfindel

21,988
13
81
109

answered Jun 26 '13 at 07:22

Praveen Kumar Purushothaman

164,888
24
203
252

1

huge-image = huge bandwidth = slow = potentially expensive (for site and visitors) – Quentin Jun 26 '13 at 07:23
@Quentin Huge Image + This case = small size = low bandwidth = more visitors!!! – Praveen Kumar Purushothaman Jun 26 '13 at 07:24
You could just have two separate images, one for the left div and one for the right div. You could have a single slice (i.e. 1000px x 1) and add a `repeat: repeat-x` for the length of the div. – BLaZuRE Jun 26 '13 at 07:25
**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: http://lib.znate.ru/pars_docs/refs/35/34496/34496_html_m46d9bb81.gif – Praveen Kumar Purushothaman Jun 26 '13 at 07:25
@BLaZuRE That doesn't work. – Praveen Kumar Purushothaman Jun 26 '13 at 07:27
3

@PraveenKumar — That's a solid black image. Solid black images compress really well! – Quentin Jun 26 '13 at 07:28
@PraveenKumar Why wouldn't it work? – BLaZuRE Jun 26 '13 at 07:28
@Quentin Optimization is the key! :) – Praveen Kumar Purushothaman Jun 26 '13 at 07:28
Good idea, but the gradient doesn't adjust to the page length. – Jan Turoň Jun 26 '13 at 07:31

Jan Turoň · Answer 3 · 2013-06-26T07:40:16.270

0

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 */

edited Jun 26 '13 at 07:40

answered Jun 26 '13 at 07:27

Jan Turoň

31,451
23
125
169

You're recommending the same tool as Abdul Malik; I still don't see any options there to create the pair of side by side gradients. – Quentin Jun 26 '13 at 07:32
Hello Jan, this is not working in IE7 – JoseTheDev Jun 26 '13 at 07:35
@Quentin I suggest **body** background. The "side-by-side" effect is mentioned to place the website-container div in step 3 – Jan Turoň Jun 26 '13 at 07:35
@JanTuroň — No, step three is the grey backgound middle section. Not the white to black gradient on the left or the grey to black gradient on the right. – Quentin Jun 26 '13 at 07:38
@JNGarcia87 IE7 is almost dead browser today: http://www.w3schools.com/browsers/browsers_explorer.asp If someone still uses it, he is not surprised with missing background gradient. – Jan Turoň Jun 26 '13 at 07:38
W3Schools' browser stats are among the least representative of all the sources of browser stats out there. Their sample is terribly biased. – Quentin Jun 26 '13 at 07:41
@Quentin I updated the answer to clarify the gradient. – Jan Turoň Jun 26 '13 at 07:44
@JanTuroň Yes, but the problem is, our client requires to work on that design. – JoseTheDev Jun 26 '13 at 07:47
@JNGarcia87 Then use [conditional comments](http://www.quirksmode.org/css/condcom.html) for IE7 fallback or ask the customer if he wants better performance for 98% people traded for minor background change for the 2%. – Jan Turoň Jun 26 '13 at 08:39

Ashish Sharma · Answer 4 · 2013-06-26T07:44:36.473

0

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; }

edited Jun 26 '13 at 07:44

answered Jun 26 '13 at 07:27

Ashish Sharma

332
7
32

Is it possible to use image of gradient repeated instead use css3? – JoseTheDev Jun 26 '13 at 07:33
Yes it is absolutely possible. See My edit in last 3 lines/. – Ashish Sharma Sep 04 '13 at 05:35

D051P0 · Answer 5 · 2013-06-26T07:50:23.980

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]-->

Shouldn't the standard CSS come after the vendor prefix CSS so it will win at the cascade? — Quentin, Jun 26 '13 at 07:29
This gives a horizontal gradient. The question is asking for *two* vertical gradients next to each other. — Quentin, Jun 26 '13 at 07:31
For IE 6-8 you need two div containers. http://stackoverflow.com/questions/6093708/diagonal-gradient-in-ie — D051P0, Jun 26 '13 at 07:39
Not working in IE7, the reason I'm pushing through IE is because our target market is using IE. — JoseTheDev, Jun 26 '13 at 07:39
You should use if-Comments for IE and define separate css for IE6-8. — D051P0, Jun 26 '13 at 07:46

HTML/CSS Design for the Background

5 Answers5