Background-origin Property in CSS3

How to specify where the background image is positioned on the webpage in CSS3?

By using background-origin property we can specify where the background image is positioned on the webpage. If the background-attachment property with the value "fixed" is used, then the background-origin property does not show any result on the webpage.

<style>
        .class {
            background-image:url("snitfunda.jpg");
            padding:20px;
            border:5px dashed blue;
            background-origin:content-box; 
            background-repeat:no-repeat;
            background-position:center;
             }
</style>

<body>
    <p class="class">Mr. Sheo Narayan is a software professional since 2000 (15+ years) and working in .NET Technologies since its first release. 
       He is also the founder of a popular .NET Community website http://www.DotNetFunda.com. 
       He has been awarded with Microsoft® Most Valuable Professional (MVP), Star Entrepreneur Award etc. 
       He has served thousands of professionals worldwide in solving their technical problems and teaching them in their professional careers. 
       His corporate training clients includes many MNCs.</p>
</body>

In the above code snippet we have given background-origin property to the .class selector, so that the .class selector selects the HTML content and apllies the given style to it.

OUTPUT

Views: 3284 | Post Order: 51

CSS3 > Background

Background-origin Property in CSS3

How to specify where the background image is positioned on the webpage in CSS3?

Related Posts

Utility Tools