
## Add an image to a div

Adding a background image to a `<div>` is easy using CSS

```html
<body>
    <div class="image"></div>
</body>
```

```css
#image {
    background-image: url('images/background.jpg');
    background-size: cover;
    width: 1024px;
    height: 450px;
}
```

## Add a gradient overlay to this image

```css
#image {
    background-image: 
        linear-gradient(to bottom, rgba(245, 246, 252, 0.50), rgba(117, 19, 93, 0.75)), 
        url('images/background.jpg');
    background-size: cover;
    width: 1024px;
    height: 450px;
}
```


How to add an image gradient overlay using CSS

Add an image to a div

Add a gradient overlay to this image