sastro Posted December 23, 2009 Share Posted December 23, 2009 Hi, How to make web backgound like the picture below and will works for all browser? Thanks in advanced Quote Link to comment Share on other sites More sharing options...
vinpkl Posted December 23, 2009 Share Posted December 23, 2009 i have attached the picture for the idea. if you want to increase the size then you can do it in photoshop. vineet [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sastro Posted December 23, 2009 Author Share Posted December 23, 2009 Thanks for replay, but i need only 1 image and will be stretch depend of the browser size Quote Link to comment Share on other sites More sharing options...
FaT3oYCG Posted December 23, 2009 Share Posted December 23, 2009 yeah use css to set it as the background inage with a width of 100 % and repeat-y so it fills the whole page. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted December 30, 2009 Share Posted December 30, 2009 Its a bad idea to do it like that, same effect can be accomplished using two gradients, which both allows for a flexible width, and decreases the file-size in most cases. Considering that the main wrapper likely will be the highest at any time, you would simply place two additional divisions inside the wrapper, using absolute positioning, minus their own width towards the left and right of the wrapper. This would make them both take up the entire height, even when the content gets longer. Example follows. <!DOCTYPE html> <html lang="en-US"> <head> <title>LRG Layout Example by BlueBoden</title> <style type="text/css"> * {margin:0;padding:0;} html, body { height: 100%; } p {padding: 0 0.5em 1em 0.5em;} h1,h2,h3,h4,h5,h6 {padding: 0 0.5em 1em 0.5em;} #Basement { position: relative; min-height: 100%; width: 75%; min-width: 768px; max-width: 1600px; background: #000000; margin: auto; color: #ffffff; } #LGradient { height: 100%; width: 73px; left: -73px; /* Minus its own Width */ background: url("73Gra.png");background-position: 73px 0px; } #RGradient { height: 100%; width: 73px; right: -73px; /* Minus its own Width */ background: url("73Gra.png");background-position: 0px 0px; } .a {position:absolute;top:0;} </style> </head> <body> <div id="Basement"> <div id="CenterContent"> <h1>LRG Layout Example by BlueBoden</h1> <p>This Example shows how to create a gradient on each side of the Basement, which can be used to create a nice "shadow"-like effect.</p> <p>Two additional divs was placed inside of Basement, i then used absolute positioning to remove them from the normal flow, positioned them at the left and right sides accordingly. Finally i applied the height of 100%, which will make it take up 100% height of Basement, even when the content gets longer then the min-height of Basement.</p> <p>Additional columns can be placed using float, if they are needed.</p> </div> <div id="LGradient" class="a"></div> <div id="RGradient" class="a"></div> </div> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
haku Posted January 4, 2010 Share Posted January 4, 2010 Its a bad idea to do it like that, same effect can be accomplished using two gradients, which both allows for a flexible width, and decreases the file-size in most cases. Actually, it's preferable to use one image over two, even though the combined image size is greater than the combined individual sizes. The reason for this is due to limitations in HTTP by which only two elements can be downloaded at any one time from any single domain. This means that all other elements are put in a queue while the two elements are being downloaded. This is what led to the CSS sprites technique of combining as many images on the page into one, and using background positioning to show only the relevant part of the image. Even for flexible width layouts, a single image can be used, also using background positioning to show the relevant part of the image. Doing this speeds up overall page downloading time. The less images you have, the faster the page will load. The only exception to this would be if you put the two gradients onto separate domains, meaning that the images could be downloaded concurrently without pushing any other elements into the queue. But if you have a bunch of elements being downloaded from those domains, it's still preferable to combine the images. See point 1 (minimize http requests) here: http://developer.yahoo.com/performance/rules.html Quote Link to comment Share on other sites More sharing options...
ignace Posted January 4, 2010 Share Posted January 4, 2010 I second what haku said I also want to add that if you want to use such a technique you must make sure that it works for all resolutions I for example browse at 1680x1050 (16:10) However you can not create an image that is as wide as 1680. Therefor create your image that holds the effect till where it stops (if using Photoshop you can retrieve the spread) fill the rest of the page with your background color like so: body { background-color: #888; /* to fill the entire viewport */ background-image: url(..); /* your image */ background-repeat: repeat-y; background-position: center; /* center the image */ } Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 5, 2010 Share Posted January 5, 2010 Actually, it's preferable to use one image over two Very funny. I guess attention to details isn't your thing, because if it where, then you would have noticed that the attached example gradiants, already where combined into a single image, AKA CSS sprite. if you want to use such a technique you must make sure that it works for all resolutions I for example browse at 1680x1050 (16:10) There's no problem around resolution using this technique, whatsoever, so that would pretty much render it obsolete to try and make sure of anything around that. I'd personally rather just use alpha transparency, since it works in all the browsers i work with. The Technique was discovered with support for all screen resolutions in mind. It can be used to create a fluid box with scratch-able borders as well, but thats another story.. Quote Link to comment Share on other sites More sharing options...
haku Posted January 5, 2010 Share Posted January 5, 2010 Actually, it's preferable to use one image over two Very funny. I guess attention to details isn't your thing, because if it where, then you would have noticed that the attached example gradiants, already where combined into a single image, AKA CSS sprite. I know. That was my point - there was nothing wrong with the original image. Which is why I was pointing out that you were incorrect with this comment: Its a bad idea to do it like that, same effect can be accomplished using two gradients, which both allows for a flexible width, and decreases the file-size in most cases. Which is why I had to laugh - you were trying to criticize my 'attention to detail', without looking at the details yourself - even though said details were your comments in the first place! Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 7, 2010 Share Posted January 7, 2010 Why have 640px when you can have like 100px width?, and alow for a flexible width at the same time? That was my initial point. Plus you allow for a flexible width, rather then fixed pixel based, you even save a few bytes in file-size, so there you have it right there. Quote Link to comment Share on other sites More sharing options...
haku Posted January 8, 2010 Share Posted January 8, 2010 No, your original point was that two images are better than one. My post wasn't commenting on the original image - I wouldn't use it that way either. My post was regarding the error in your original statement. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 9, 2010 Share Posted January 9, 2010 No, your original point was that two images are better than one. My post wasn't commenting on the original image - I wouldn't use it that way either. My post was regarding the error in your original statement. Well "two gradients" doesn't necessarily mean two separate images. The rest of my post should emphasize the meaning nicely. This Technique dose however work better with float, if you have multiple columns. Quote Link to comment Share on other sites More sharing options...
haku Posted January 9, 2010 Share Posted January 9, 2010 Well "two gradients" doesn't necessarily mean two separate images. The rest of my post should emphasize the meaning nicely. You were saying the original technique wasn't good because you could use 'two gradients'. The original image had two gradients, but your post was speaking of how it was better to use... the same thing the original image had. That doesn't really make sense. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.