CSS 101 - Float and backgrounds

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing.

CSS Float

The float property is used for positioning and formatting content.

For example let an image float left to the text in a container.

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text).

float: none;

<h1>This is a block</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod amet minima ea ex doloremque quisquam iste saepe hic rerum, corrupti, harum quam optio quia asperiores voluptate! Et quaerat ducimus amet. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis ea necessitatibus dolor maiores suscipit culpa. Ipsum exercitationem sapiente dolorem tenetur neque dolore, praesentium beatae sit eligendi aliquam laboriosam deserunt nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eaque libero voluptas provident, soluta aliquid aspernatur maiores, nobis aperiam consectetur suscipit, ipsum tempora totam pariatur. Pariatur a enim officia quo! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse suscipit assumenda distinctio perferendis! Sapiente asperiores, at vel earum, repudiandae, modi totam explicabo provident id facilis necessitatibus rerum minima voluptate doloremque?</p>

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: none;
}

float: left;

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: left;
}

float: right;

h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: right;
}

Background-color

The background-color property specifies the background color of an element.

div {
  background-color: lightgray;
}

We can also use the opacity property to specify the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:

div {
  background-color: gray;
  opacity: 0.2;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
}

background-image

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

div {
    background-image: url('example.jpg');
    background-position: center;
    background-size: cover;
}

The background-postion property can have those values:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

If you only specify one keyword, the other value will be "center"

The background-size: cover; scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area).

Linear Gradient

The linear gradients let you display smooth transitions between two or more specified colors.

div {
    background-image: linear-gradient(black, lightgray);
    height: 400px;
}

Background

It is possible to combine many of the background property to get cool image effect.

div {
    background: 
        linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)), 
        center top / cover url('montain.jpg') fixed;
    height: 400px;
}

Conclusion

That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman