<!doctype html>
<html>
<head>
<title>background-image</title>
<style>
*{
box-sizing: border-box;
}
body,html{
height: 100%;
padding: 0;
margin: 0;
}
div{
height: 100%;
padding: 0;
margin: 0;
}
/*first demo with description*/
.demo-1{
background-color: #fbfcfc;
background-image: url('cod-face.jpg');/*image here*/
background-origin: border-box;
background-position:0% -10.3em;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 90%;
}
.dsc-d1{
background-color: #d5d8dc ;
color: black;
line-height: 1.5;
padding: 10px;
font-size: 20px;
height: 120%;
}
p{
white-space: pre-line;
hyphens: auto;
padding: 0 5px 5px 5px;
}
/*second demo with description*/
.demo-2{
background-color: #fbfcfc;
background-image: url('cod-back.jpg');/*image here*/
background-origin: border-box;
background-position:center 80%;
background-attachment: fixed;
background-size:cover;
background-repeat: no-repeat;
height: 95%;
}
.dsc-d2{
color: black;
line-height: 1.5;
padding: 5px 10px;
font-size: 20px;
height: auto;
}
.demo-local{
display:block;
width: 500px;
max-height: 500px;/*to force overflow scroll*/
padding: 0;
margin: 2em 0 0 4em;
background-image: url(mask.jpeg);/*image here*/
background-origin: border-box;
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
background-color: red;
background-attachment: local;
overflow: scroll;/*to force overflow scroll*/
border: 1px solid red;
}
aside{
padding-bottom: 700px;/*causing some extra space less than the container space.to force overflow scroll.this way local will be better exhibited*/
}
</style>
</head>
<body>
<div class="demo-1"></div>
<div class="dsc-d1">
<p>
<h2><code>background-origin</code></h2>
"background-origin" decides the background positioning area, that is, every element has three boxes: content-box,padding-box,border-box
"background-origin" decides what top-left corner to start with. is it the content-box top-left corner or the padding-box top-left corner...and so on.from that "top-left" point we start positioning using background-position,hence, background-origin decides the background positioning area. noticce how the image is shown through the boxes(the used one through background-origin: and the other left one.for instance if i have background-origin:padding-box; then image is shown through padding and content and if background-origin:border-box; image will be shown through border, padding and content.</p>
<p>
<h2><code>background-position</code></h2>
with <percentage> values like 50% 30% means: the point at 50% 30% in the image will be positioned at the position 50% 30% in the element.any values(positive or negative) except <code>percentage</code> will have expected results.with percentage values if:
<ul>
<li>image width equal container width.percentage widths has no influence.</li>
<li>image width is less than container width.percentage widths has effect similar to any css unit.</li>
<li>image width greater than container width.percentage widths will be unexpected.</li>
</ul>
</p>
</div>
<div class="demo-2"></div>
<div class="dsc-d2">
<p>
<h2><code>background-size</code></h2>
size of an image can be set relative to it's container using percentage values,absolute values like px or keywords like contain and cover.<code>cover</code> always looks better than <code>100% 100%</code>.<code>contain</code> will leav some space with no background image.negative values will position image outside.<em><strong>percentage</strong></em> value like 20% 30% mean: the point at 20% 30% of the image will be positioned at the point 20% 30% of the container.
</p>
<h2><code>background-clip</code></h2>
prior to setting:
<ul>
<li>the background positiong area (the starting point where the image will be positioned-usually top-left corner) using <code>background-origin</code>.</li>
<li>the background image position within the the positioning area (how far the image will be positioned from the starting point inside the positioning area set using the background-origin previously).</li>
<li>background size(the image size).</li>
</ul>
now <code>background-clip</code> can be used to clip any background-image or background-color inside the positioning area:
<ul>
<li><code>background-clip: padding-box;</code>/*will clip any background image or color outside the padding-box(no background for border-box).*/</li>
<li><code>background-clip: content-box;</code>/*will clip any background image or color outside the content-box(no background for padding-box and border-box)*/</li>
<li><code>background-clip:border-box;</code>will show background image through border,padding and content.border need some transparency to show the image through it's content.</li>
</ul>
<div class="dsc-attach">
<p>
<h2><code>background-attachment</code></h2>
<ul>
<li><code>background-attachment:scroll;</code>
the background image will scroll with the element if the container of that element that holds the background image is scrolled.
a living example is this webpage:when i scroll the main container(in this case the body tag) up or down background images should be scrolling if i have set the property to scroll(default).it is now fixed because i have set it to fixed.
</li>
<li><code>background-attachment:fixed;</code>
if the main container is scrolled the element that holds the background image is scrolling alongside as well but the background image itself is not.as an example:this webpage demo-1 and demo-2 images are fixed and not scrolling along with their elements.
<strong>note:</strong>when a background image is set to be fixed it will remain in it's position where the holding element was defined in the markup.then when the holding element is scrolled the image will disappear.the image will show back once the holding element is scrolled back above the fixed background image.the holding element will act as a window to show the background.</li>
<li><code>background-attachment:local;</code>
the background image will scroll alongside it's container.and the container will scroll along side the main container(main container for example body element).see the example below:
<div class="demo-local">
<aside></aside>
</div>
</li>
</ul>
</p>
</div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.