0

Okay, basically I've created a design in photoshop, it has a noise background with a centred radial gradient (to create some light) What is the best way of creating this within CSS and allowing support in all browsers?

user1106025
  • 23
  • 7

3 Answers3

1

This question is answered in the following thread: Adding images when CSS gradients are used?

To summarize: you should likely just use an image, if you require loading an image, it is simpler to just include more information in the image (i.e. a radial gradient as well as the noise) than to overlay the two and deal with the complexity of the not-yet finalized css3 standard and non-webkit browsers not supporting multiple backgrounds.

Community
  • 1
  • 1
Cory Dolphin
  • 2,650
  • 1
  • 20
  • 30
  • My problem then is having to use a massive image to ensure the site can be used by people with large screens/resolution and then making the loading time for the site to increase. – user1106025 Dec 27 '11 at 19:08
  • I am assuming you were using 'repeat' for the noise image in order to maintain a small image size? In that case, follow the link, it provides examples of how to use the background-gradient using overlayed divs such that it is supported by all browsers which support a background gradient. A potential alternative is to use media-queries: http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/ Note that you should build for a mobile, and using media queries add heavier content for a Desktop. – Cory Dolphin Dec 27 '11 at 19:20
0
<style>
#element {
    background: url("10x10pxnoiseimage.png") repeat, -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
    background: url("10x10pxnoiseimage.png") repeat, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: url("10x10pxnoiseimage.png") repeat, -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: url("10x10pxnoiseimage.png") repeat, -o-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
    background: url("10x10pxnoiseimage.png") repeat, -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* IE10+ */
    background: url("10x10pxnoiseimage.png") repeat, radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* W3C */
}
</style>

<!--[if lt IE 9]>
<style>
#element {
    background: url("bigimage.png");
}
</style>
<![endif]-->
  • The "10x10pxnoiseimage.png" is transparent with a few white/grey/black pixels.
  • You can also decide to sue css3pie so you can also use these new image tags in IE8/7/6.
  • And the radial dummy gradients are taken from: http://www.colorzilla.com/gradient-editor/

If you send me the image I can make a dummy html for you if wanted ^^

seahorsepip
  • 4,519
  • 1
  • 19
  • 30
0

There's a CSS3 property called background-size, which basically allows the background image to stretch across the container. However, it's still not universally accepted.
Since you can only use one background image (currently), there are 2 options I know about:
1) Use an image tag since the image will stretch to fill the container if its height and width are 100%, you can then create an inner container (for the content), set its position to absolute, and its top/left properties to 0, and give it a z-index of higher than that of the image. Any number greater than 1 should work. That will place the container above the image, and will solve your problem. However, the image will be greatly stretched, depending on the dimensions of the container.
2) Use 3 images: 1 for the left side of the image, 1 for the right side, and the last 1 for the middle part. Float 3 divs, using the first and third images as the background of the first and third divs. Use the 2nd image as the background of the middle div. How seamless your images look will depend on how you cut it.
Those should work nicely.

Kneel-Before-ZOD
  • 4,141
  • 1
  • 24
  • 26