An example for background origin.

This commit is contained in:
Chris Eppstein 2010-03-28 02:50:38 -07:00
parent e65516f99e
commit d4e90d79aa
5 changed files with 45 additions and 6 deletions

View File

@ -0,0 +1,8 @@
---
title: Background Origin
description: See background origin in action.
framework: compass
stylesheet: compass/css3/_background_origin.sass
example: true
---
= render "partials/example"

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,7 @@
.example
#padding-box(style="background-image: url(background/);")
Padding Box
#border-box(style="background-image: url(background/);")
Border Box
#content-box(style="background-image: url(background/);")
Content Box

View File

@ -0,0 +1,20 @@
@import compass/css3
.example
padding: 2em
div
background:
repeat: repeat
position: top left
border: 10px solid rgba(255, 0, 0, 0.5)
color: white
+text-shadow(darken(#00f, 50%), 2px, 2px)
padding: 1em
text-align: center
margin-bottom: 2em
#padding-box
+background-origin("padding-box")
#border-box
+background-origin("border-box")
#content-box
+background-origin("content-box")

View File

@ -1,13 +1,17 @@
// //
Position the background off the edge of the padding, border or content Override `!default_background_origin` to change the default.
* Possible values: [padding-box | border-box | content-box]
* browser defaults to padding-box, mixin defaults to content-box
Override constants to change defaults.
!default_background_origin ||= "content-box" !default_background_origin ||= "content-box"
//
Position the background off the edge of the padding, border or content
* Possible values:
* `"padding-box"`
* `"border-box"`
* `"content-box"`
* browser defaults to `"padding-box"`
* mixin defaults to `"content-box"`
=background-origin(!origin = !default_background_origin) =background-origin(!origin = !default_background_origin)
// webkit and mozilla use the deprecated short [border | padding | content] // webkit and mozilla use the deprecated short [border | padding | content]
!deprecated= "padding" !deprecated= "padding"