Scribd
Upload
14 views

CSS Properties 01

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

CSS Properties 01

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

CSS

3.1.2 background with opacity


The opacity in CSS is the property of an element that describes the transparency of the element.
Image Opacity: The opacity property is used in the image to describe the transparency of the image.
The value of opacity lies between 0.0 to 1.0 where a low value represents high transparency and a
high value represents low transparency.

<!DOCTYPE html>
<html>
<head>
<meta name = "authors" content = "Balbharti">
<meta name = "description" content ="Advance web designing">
<meta name = "keywords" content ="html5, learn html5, list in html5">
<meta name="copyright" content= " copyright Balbharti All right Reserve">
<style>
div {
background-color: green;
}

div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background of an element,
all of its child elements become transparent as well. This can make the text inside a fully
transparent element hard to read:</p>

<div class="first">
<h1>opacity 0.1</h1>
</div>

<div class="second">
<h1>opacity 0.3</h1>
</div>

<div class="third">
<h1>opacity 0.6</h1>
</div>

<div>
<h1>opacity 1 (default)</h1>
</div>

</body>
</html>
3.4 background position and attachment
<!DOCTYPE html>
<html>
<head>
<meta name = "authors" content = "Balbharti">
<meta name = "description" content ="Advance web designing">
<meta name = "keywords" content ="html5, learn html5, list in html5">
<meta name="copyright" content= " copyright Balbharti All right Reserve">
<style>
body {
background-image: url("Capture.png");
background-repeat: no-repeat;
// background-position: right;
// background-position: left;
// background-position: center;
// background-position: right top;
// background-position: left top;
// background-position: center bottom;
// background-position: right bottom;
background-position: center bottom;
/*left top center */

}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the background image should


scroll or be fixed (will not scroll with the rest of the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>


<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

3.5 background attachment


Property Values

scroll: It is the default value that prevents the element from scrolling with the contents, but scrolls with
the page.

fixed: Using this value, the background image doesn't move with the element, even the element has a
scrolling mechanism. It causes the image to be locked in one place, even the rest of the document
scrolls.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("Capture.png");
background-repeat: no-repeat;
// background-attachment: scroll;
background-attachment: fixed;
}
</style>
</head>
<body>

<p>The background-image scrolls with the page. Try to scroll down.</p>


<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>
</html>
CSS Position

The CSS position property is used to set position for an element. it is also used to place an element
behind another and also useful for scripted animation effect.
You can position an element using the top, bottom, left and right properties. These properties can be
used only after position property is set first. A position element's computed position property is relative,
absolute, fixed or sticky.

Let's have a look at following CSS positioning:

1. CSS Static Positioning


2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning

1) CSS Static Positioning

This is a by default position for HTML elements. It always positions an element according to the normal
flow of the page. It is not affected by the top, bottom, left and right properties.

2) CSS Fixed Positioning

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned
relative to the browser window, and doesn't move even you scroll the window.

3) CSS Relative Positioning

The relative positioning property is used to set the element relative to its normal position.

4) CSS Absolute Positioning

The absolute positioning is used to position an element relative to the first parent element that has a
position other than static. If no such element is found, the containing block is HTML.

You might also like