example and cleanup for background-size.
This commit is contained in:
parent
d9d0609af4
commit
c2b1588e21
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Background Clip
|
title: Background Clip
|
||||||
description: Background Clip In Action
|
description: See background-clip in action.
|
||||||
framework: compass
|
framework: compass
|
||||||
stylesheet: compass/css3/_background_clip.sass
|
stylesheet: compass/css3/_background_clip.sass
|
||||||
example: true
|
example: true
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Background Origin
|
title: Background Origin
|
||||||
description: See background origin in action.
|
description: See background-origin in action.
|
||||||
framework: compass
|
framework: compass
|
||||||
stylesheet: compass/css3/_background_origin.sass
|
stylesheet: compass/css3/_background_origin.sass
|
||||||
example: true
|
example: true
|
||||||
|
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Background Size
|
||||||
|
description: See background-size in action.
|
||||||
|
framework: compass
|
||||||
|
stylesheet: compass/css3/_background_size.sass
|
||||||
|
example: true
|
||||||
|
---
|
||||||
|
= render "partials/example"
|
@ -0,0 +1,11 @@
|
|||||||
|
.example
|
||||||
|
#auto
|
||||||
|
%code background-size: auto
|
||||||
|
#contain
|
||||||
|
%code background-size: contain
|
||||||
|
#cover
|
||||||
|
%code background-size: cover
|
||||||
|
#percent
|
||||||
|
%code background-size: 50% 50%
|
||||||
|
#absolute
|
||||||
|
%code background-size: 100px 25px
|
@ -0,0 +1,25 @@
|
|||||||
|
@import compass/css3
|
||||||
|
|
||||||
|
.example
|
||||||
|
padding: 2em
|
||||||
|
div
|
||||||
|
background:
|
||||||
|
image= image-url("examples/css3/bg-origin/bg.png")
|
||||||
|
repeat: no-repeat
|
||||||
|
position: top left
|
||||||
|
border: 10px solid rgba(255, 0, 0, 0.5)
|
||||||
|
color: black
|
||||||
|
+text-shadow(#fff, 1px, 1px, 4px)
|
||||||
|
padding: 1em
|
||||||
|
text-align: center
|
||||||
|
margin-bottom: 2em
|
||||||
|
#auto
|
||||||
|
+background-size("auto")
|
||||||
|
#contain
|
||||||
|
+background-size("contain")
|
||||||
|
#cover
|
||||||
|
+background-size("cover")
|
||||||
|
#percent
|
||||||
|
+background-size("50% 50%")
|
||||||
|
#absolute
|
||||||
|
+background-size("100px 25px")
|
@ -9,4 +9,4 @@ classnames:
|
|||||||
---
|
---
|
||||||
- render 'reference' do
|
- render 'reference' do
|
||||||
%p
|
%p
|
||||||
This mixin provides . See <a href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 spec: background-size</a>.
|
This mixin provides cross browser access to the CSS3 <code>background-size</code> attribute using supported vendor prefixes. See <a href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 spec: background-size</a>.
|
||||||
|
Loading…
Reference in New Issue
Block a user