DEV Community

Cover image for CSS 101 - Float and backgrounds
Eric The Coder
Eric The Coder

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: none;
}
Enter fullscreen mode Exit fullscreen mode

float none

float: left;

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

float left

float: right;

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

float right

Background-color

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

div {
  background-color: lightgray;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

background-color

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

linear gradient

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;
}
Enter fullscreen mode Exit fullscreen mode

back

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

Discussion (0)