Geek Answers Handbook

Numerous CSS backgrounds work inconsistently

I get a weird problem trying to use multiple backgrounds. The main effect that I want to get is a gradient background at the edges and a transparent background in the middle. Here is the really basic code:

background: transparent, linear-gradient(45deg, #f06, yellow); background-size:50% 50%, 100% 100%; background-position: 50% 50%, 0 0; background-repeat: no-repeat;

I use dabblet to play with it. If I use this code, I get nothing (I replaced transparent with green , make sure I can see it): http://dabblet.com/gist/5339331

However, if I change the backgrounds ( backgound: linear-gradient(45deg, #f06, yellow), green; ), it works fine as expected, except, of course, in the opposite : <a2>

What's going on here? Why would it work in one direction and not in another? I also tried replacing the gradient with blue to make it simple, and it just doesn't work: http://dabblet.com/gist/5339396

FYI I am testing in Chrome 27 and getting yellow ! with warning Invalid property value.

EDIT: Here is the best (as yet broken) example of the effect I'm going to do. There are four parts in this example, each with its own gradient background. Ideally, I will have one part, because

  • this will allow the gradient to look right.

  • it looks horrible and does not play well on mobile devices.

  • it would be nice to avoid extra fixed / absolute divs if possible

+4
source share
2 answers

As you know, transparent is a color value, not an image value, like blue . Since this is a color value, it should be indicated last in the abbreviation background , and only there, because only the base layer can have a background color . That's why the Chrome Web Inspector reports an invalid property value with what you have.

Unfortunately, there is no way to use multiple backgrounds to indicate a single background image and its area that has been cut out (for example, to open a through hole in the middle of a section).

What you have on jsFiddle is a step. You can easily remove the extra div elements by adding pseudo-elements to both html and body instead of ::before and ::after , so you have four pseudo-elements to work with. You will also need to use background-size and background-position to properly adjust the gradient background so that they look seamless.

Since you want the gradients to be translucent, without any problems, you need to prevent them from matching. This is easy to do by adjusting the offsets as well as the background-size accordingly.

Here is the CSS I used:

 html::before, html::after, body::before, body::after { display: block; position: fixed; background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)); content: ''; } html::before, html::after { height: 25%; left: 25%; right: 25%; background-size: 200% 400%; } body::before, body::after { width: 25%; top: 0; bottom: 0; background-size: 400% 100%; } html::before { top: 0; background-position: top; } html::after { bottom: 0; background-position: bottom; } body::before { left: 0; background-position: left; } body::after { right: 0; background-position: right; }

jsFiddle preview ( with borders to show how I organized the pseudo elements )

You can’t do it in just one box, so yes, it can work poorly on mobile devices. If this does not work too well, then you can use the SVG background to achieve this, or if it fails, you may have to revert to using traditional preliminary rendered background images.

+2
source

The syntax for CSS background syntax is as follows:

background: background-color background-image background-repeat background-attachment, background-position

Note that there are no commas, so it’s best not to use them, especially when separating background-color and background-image .

Using all this and back to the original example: http://dabblet.com/gist/5340042

0
source

More articles:


All Articles