Hey all. Just a quick question really - I am trying to make a single page with a gradient background (top left -> bottom right) in CSS but also want a background image in the bottom right corner. Is this possible to do in CSS (or CSS3 now isn't it??) Sorry if this is a really numpty question, I have no web design talent at all and have been trying to read webpages on this. I can seem to get either the image in the corner or the gradient but not both together!!! Cheers FB
What are you using to design the site - a content management system or straight html? That will make a difference in the answer. With Joomla or WordPress, just apply the image to a module in the bottom right, and specify the background in the css. It all depends on what cms and template you are using.
Its just plain old html. Been digging about and its getting there. Here is what I have but now I just want the image bottom right.....ideas appreciated! Code: <!DOCTYPE html> <html> <head> <style type="text/css"> html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */ body { background: #a5c9e5; background: url(img.png) no-repeat 50% 300px, -moz-linear-gradient(top, #1e5799 0%, #a5c9e5 100%); background: url(img.png) no-repeat 50% 300px, -webkit-gradient(linear, 0% 0%,0% 100%, from(#1e5799), to(#a5c9e5)); background: url(img.png) no-repeat 50% 300px, -webkit-linear-gradient(top, #1e5799 0%,#a5c9e5 100%); background: url(img.png) no-repeat 50% 300px, -o-linear-gradient(top, #1e5799 0%,#a5c9e5 100%); background: url(img.png) no-repeat 50% 300px, -ms-linear-gradient(top, #1e5799 0%,#a5c9e5 100%); background: url(img.png) no-repeat 50% 300px, linear-gradient(top, #1e5799 0%,#a5c9e5 100%); } </style> </head> <body> <p>Content</p> </body> </html> Copy and paste at its best
It's possible to do only with CSS 2.1, you don't need to use CSS 3 because won't work in all browsers, when I mean all browsers I also include IE6 to IE8. Just because CSS 3 requires a lot more work to put the site working in all these browsers. Actually, the only thing that you'd be needed from CSS 3 would be the multiple background property, but this feature doesn't work on versions below to IE9. To accomplish this you're going to need more work, there's no need for it, 'cause you can use CSS 2.1, instead. So, doing this with CSS 2.1 will be easier if you have a solid understand of CSS. The technique to use this is by the bullet-proof float-based-layout. All you gotta do is create some containers with 'div tag' and align them with the float property, then you add background the way you want, on them. This is a much faster and reliable technique. If you need more details, ask.
