css background properties tutorial
- Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
- Online web design, along with everything you need for a complete website.
- css background properties tutorial, like background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin, background-clip.
css background-color property
CSS background-color property set background color.
body {
background: #ffffff;}
or
body {
background: linear-gradient(107.2deg, rgb(150, 15, 15) 10.6%, rgb(247, 0, 0) 91.1%);}
css background-image property
The background-image property specifies an image to use as the background of an element.
.img {
background: url(image.jpg) no-repeat;
width: 100%;
height: 100%;}
.mutli_img {background-image: url("image.jpg"), url("image.jpg");}
css background-position property
CSS background-position property use to set background image in different type position like left, right, center, top, bottom.
.top {background-position: top;}
.left_top {background-position: top center;}
.percentage {background-position: 40% 60%;}
.pixel {background-position: 16px 40px;}
css background-size property
The following example resizes a background image to much smaller than the original image (using pixels):
.auto {background-size: auto;}
.cover {background-size: cover;}
.contain {background-size: contain;}
.length_width {background-size: 50px; background-repeat: no-repeat;}
.length {background-size: 50px 40px; background-repeat: no-repeat;}
.percentage_width {background-size: 50%; background-repeat: no-repeat;}
.percentage {background-size: 100% 100%;}
css background-repeat property
CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x vertically repeat, and repeat-y horizontally repeat.
.repeat {background-repeat: repeat;}
.repeat-x {background-repeat: repeat-x;}
.repeat-y {background-repeat: repeat-y;}
.no-repeat {background-repeat: norepeat;}
.space {background-repeat: space;}
.round {background-repeat: round;}
css background-origin property
The CSS
The property takes three different values:
- border-box - the background image starts from the upper left corner of the border
- padding-box - (default) the background image starts from the upper left corner of the padding edge
- content-box - the background image starts from the upper left corner of the content
.padding {background-origin: padding-box;}
.border {background-origin: border-box;}
.content {background-origin: content-box;}
css background-clip property
The CSS background-clip property specifies the painting area of the background.
The property takes three different values:
- border-box - the background is painted to the outside edge of the border
- padding-box - the background is painted to the outside edge of the padding
- content-box - the background is painted within the content box
.border {background-clip: border-box;}
.padding {background-clip: padding-box;}
.content {background-clip: content-box;}
.demo1 {
border: 9px dotted #fff;
padding: 14px;
background: #c00;
background-clip: border-box;
}
.demo2 {
border: 9px dotted #000;
padding: 14px;
background: #008000;
background-clip: padding-box;
}
.demo3 {
border: 9px dotted #000;
padding: 14px;
background: #007FFF;
background-clip: content-box;
}
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
css background-clip demo
The background clip the border-box
The background clip the padding-box
The background clip the content-box
css background-attachment property
CSS background-attachment property use to set background image in different type attachment like fixed, scroll.
.scroll {
height: 200px;
width: 300px;
background-image: url("images.jpg");
background-attachment: scroll;
background-repeat: no-repeat;
overflow-y: scroll;
}
.fixed {
height: 400px;
width: 400px;
background-image: url("images.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
.local {
height: 400px;
width: 400px;
background-image: url("images.jpg");
background-attachment: local;
background-repeat: no-repeat;
overflow-y: scroll;
}
.initial : sets this property to its default value.
.inherit : inherits this property from its parent element.
.demofix {
background-image: url("images.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
width: 100%;
height: 400px;
overflow:auto;}
<div class="demofix"></div>
css background-attachment demo
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
Contrary to popular belief, Lorem Ipsum. Interessantiss quisso pudia ce receita de bolis
All Basic HTML5
HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.
All Basic CSS3
CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.
js JAVASCRIPT
Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.
CREATIONS
In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.
NAVIGATION Bar
having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.
WEB BUTTONS
Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.