css background properties tutorial

css background properties tutorial, like background-color, background-image, background-position, background-repeat, background-attachment.

css background-color property

CSS background-color property set background color.

.body {
background: #000; background: url(image.jpg) no-repeat;
width: 400px;
height: 400px;}

css background-image property

The background-image property specifies an image to use as the background of an eleme

.img {background-image: url("image.jpg");}

.mutli_img {background-image: url("image.jpg"), url("image.jpg");}

.gradient {background-image: linear-gradient(rgba(0, 0, 125, 0.1), rgba(125, 125, 0, 0.1)), 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;}

.repeatx {background-repeat: repeat-x;}

.repeaty {background-repeat: repeat-y;}

.norepeat {background-repeat: norepeat;}

.space {background-repeat: space;}

.round {background-repeat: round;}

css background-origin property

The CSS background-origin property specifies where the background image is positioned.

The property takes three different values:

1. border-box - the background image starts from the upper left corner of the border
2. padding-box - (default) the background image starts from the upper left corner of the padding edge
3. 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:

1. border-box - the background is painted to the outside edge of the border
2. padding-box - the background is painted to the outside edge of the padding
3. 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;}

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.

html properties tutorial

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.

javascript properties tutorial

Java 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.

creation properties tutorial

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.

css menu bar horizontal & vertical

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 your good content.

css notebook paper design

Question: I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.

answer: this tutorial will show you how to create a notebook themed website using only css.

fancy text generator

a fancy cool font generator that helps create stylish text font styles with beautiful symbols and fancy characters for instagram other places.

Alt Codes List of Alt Key Codes Symbols

Alt Codes List of Alt Key Codes Symbols,keyboard for windows and mac,The list of all Alt Codes for special characters and symbols.

keyboard shortcuts for windows and mac

keyboard shortcuts for windows and mac,are often used in modern operating systems and computer software programs.

Css Button Generator With Icon And Texture

✓ Css Button Generator With Icon And Texture.
✓ Is one of the most complete button generators on the web.
✓ A very strong one css button generator.
✓ With many design options.
✓ Professional design engine.
✓ A long-term and difficult construction to serve you all.
✓ This is FREEWARE.
✓ Create infinite buttons at no cost.

online banner text generator

online banner text generator a helpful tool to generate image banner.Upload your assets, company logo, Simultaneously edit text, image and effects directly on all banners.

online 3d text generator

online 3D text generator, a free online 3D tool to create 3D typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a 3D text logos, or for art. This 3D text maker will only take you a few clicks to create the perfect 3D logo.

online html marquee generator

online html marquee generator.Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.

Online Font Family Generator

Online Font Family Generator, CSS font family generator is a very handy resource for webdevelopers and general. Generate in an instant awesome header text styles or content text styles for your website. More than 1000 font family styles are integrated that you can use.

css web buttons properties

css web buttons property,Collection of hand-picked free HTML and CSS button code examples. In the last years, the web has been invaded by the cool buttons provided by libraries like Bootstrap. Even if these libraries are cool and feature rich, they're also really heavy, and it's a waste to load hundreds of kilobytes if you need to show just one button. 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.