CSS 101 - Float and backgrounds
Tags: css, beginners, tutorial
Published: 2021-03-21 14:15:58

---
title: CSS 101 - Float and backgrounds
published: true
description: 
tags: CSS, beginner, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--SfWzjSi6--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/y0qmpmhtnw1db8s4jxx9.jpg
series: CSS 101
---

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. 

<h2>CSS Float</h2>
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;
```html
<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>
```

```css
h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: none;
}
```
![float none](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptuyzp73q1yfibhgyleh.png)

float: left;
```css
h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: left;
}
```
![float left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hwg0ypp2zlopgvb844u.png)

float: right;
```css
h1 {
  background-color: red;
  margin: 5px;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  border: solid;
  float: right;
}
```
![float right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e70oxrh1v4jw7hhws6po.png)

<h2>Background-color</h2>
The background-color property specifies the background color of an element.
```css
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:
```css
div {
  background-color: gray;
  opacity: 0.2;
  padding: 10px;
  width: 100px;
  height: 100px;
  font-size: 20px;
}
```
![background-color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq1s3ujzrsmqgonzt6ay.png)

<h2>background-image</h2>
The background-image property specifies an image to use as the background of an element.
```css
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).

<h2>Linear Gradient</h2>
The linear gradients let you display smooth transitions between two or more specified colors.
```css
div {
    background-image: linear-gradient(black, lightgray);
    height: 400px;
}
```
![linear gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8y52ufq0qd1axd93kpj.png)

<h2>Background</h2>
It is possible to combine many of the background property to get cool image effect.
```css
div {
    background: 
        linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)), 
        center top / cover url('montain.jpg') fixed;
    height: 400px;
}
```
![back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/378agu1dp7842phylc50.png)

<h2>Conclusion</h2>
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: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>