SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background with color, gradient, and image?

    Hi. I'm trying to better understand how to use 'background'.

    (A) - What I'd hoped to do was...

    1). Have a fall-back colour if the following gradient failed.
    2). A gradient.
    3). A non-repeat image... positioned say left top.
    4). And maybe a second non-repeat image at say 'right bottom'.

    Maybe it is impossible?

    (B) - Searching around a bit I found some code and made some alterations that would allow...

    1). Have a fall-back colour if all else failed.
    2). A repeat background image as another fall-back.
    3). A gradient.

    Here's the code...

    Code:
    div {
    height: 300px;
    width: 300px;
      
    background: red;
    background-image: url(1.png); /* fallback */
      
    background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(white)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, black, white); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(top, black, white); /* FF3.6+ */
    background-image: -ms-linear-gradient(top, black, white); /* IE10 */
    background-image: -o-linear-gradient(top, black, white); /* Opera 11.10+ */
    background-image: linear-gradient(top, black, white); /* W3C */
    }
    I guess with that code (B), I could then add some relative or absolute positioned images but then they wouldn't be in the background but in or over and added content.

    The only way I can think to accomplish (A) is to first do (B) in the main wrapper... then add an inner wrapper/div (width: 100% in which to place my background images... these would be over the gradient in the wrapper, but under any additional content placed in the 'inner wrapper/div'...

    background-image: 1.png, 2.png;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;

    Any thoughts or comments to assit me in better understand 'background' could be greatly appreciated.

    Cheers, Karl.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    In CSS3 you can apply multiple background images to an element and that incudes gradients. So to combine an image and a gradient you could do this:

    Code:
    div {
    	height: 300px;
    	width: 300px;
    	background: red;
    	background-image:url(img.gif);
    	background-image:url(img.gif), -moz-linear-gradient(top, black, white); /* FF3.6+ */
    	background-repeat:no-repeat;
    }
    You'd need to repeat the rules for other vendor extensions of course.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    In CSS3 you can apply multiple background images to an element and that incudes gradients. So to combine an image and a gradient you could do this:

    Code:
    div {
    	height: 300px;
    	width: 300px;
    	background: red;
    	background-image:url(img.gif);
    	background-image:url(img.gif), -moz-linear-gradient(top, black, white); /* FF3.6+ */
    	background-repeat:no-repeat;
    }
    You'd need to repeat the rules for other vendor extensions of course.
    Thanks O' B... that works a treat, I'd almost given-up thinking it could!

    Regards, Karl.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •