Day 25: Background Properties

Today I went over CSS background properties.  The background property is set to transparent by default.  In an element, everything except the margin area is considered the background.  When using the background-image property, the image url should be enclosed in either single or double quotes.  A good site to get background images that are aesthetically pleasing when they repeat (the default for background images is for them to repeat) is www.subtlepatterns.com.  The background property can be used to enter all the values you want for background in one property.  If you do this, the order is background-color, background-image, background-repeat, background-attachment, and background-position.  The values should be separated by a space.  However, if you leave out a value, the browser will simply use the default value, such as the scroll value for the background-attachment property, for example.

We discussed how to set a border-radius and how it is that the CSS determines how the image looks.  If we only enter in one value, the corner is based on a circle, but if we enter two values for border-radius, the image will be based on an ellipse.  An interesting thing is that the border-style will be applied to the circle, so you could have a circle with a dashed border, for example.  Also, when using the border-radius property, you can enter one, two, three, or four values, and how many values you enter will determine which value affects which corner.  To make a circle, simply set the height and width of the containment to equal amounts, and then set the border-radius to 50%.  For an oval, make the height and width of the containing element different amounts (say, 100px and 200px, for example), and then set a border-radius.

We went over box-shadows and then advanced backgrounds.  We layered background images on top of each other today.  We also discussed the background-size property.  If only one value is entered, the second value will be set to auto, and negative values are not permitted.  If two values entered, first is width, second is height.  These properties are a way to do some photoshop work without having to go into photoshop, then save the file, and insert it into the CSS again.  This is an example of the value for background when inserting one or multiple images (separate with a comma, the first image on the list is stacked on top)

url('img/smiley.png') no-repeat 50px -200px;

But it can also be done like so:

url('img/smiley.png') no-repeat right bottom;

With the property background-size and the "cover" value, the background image is resized to cover the entire browser window (if the selector is the html element, otherwise, the image will simply stretch to fit the containing element).  However, the height value should also be set to 100% for this to work, otherwise, there will be blank spots.  The background-clip property "clips" the background img or background color.  The default values is border-box, which sets the background to the border area of the div.  With content-box, the background is clipped to the content of the div (so no border or padding areas included).  With padding-box, the padding space is included.  With the background-origin property, the values can be border-box, padding-box, and content-box.  If the background-attachment property is set to fixed, then the background-origin property will have no effect.  With border-box, the position is relative to the border's (outer) edge.

The contain value (for the background-size property) scales the image to the largest size it can be while preserving its original proportions.  

 

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,566

Treehouse Points by Subject Matter: HTML 663, CSS 873, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 69% of all students."

Badge(s) Earned Today:

Backgrounds and Borders (CSS)

Courses Completed:

How to Make a Website
HTML 

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today:4

Total Hours Coding: 102