6 interesting tips for setting CSS background images

6 interesting tips for setting CSS background images

Background-image is probably one of those CSS properties that all front-end developers have used at least a few times in our careers. Most people think there's nothing unusual about background images, but. . . . . .

1. How to fit the background image perfectly to the viewport

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

background-attachment sets whether the background image is fixed or scrolls with the rest of the page.

2. How to use multiple background images in CSS

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

3. How to Create the Triangular Background Image

When we want to show some completely different options like day and night or winter and summer.

This is done by creating two divs for the entire viewport, then you need to add a background image to both of them, the second div then needs a clip-path property in order to create the triangle.

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

clip-path property creates a clipping region that sets which part of an element should be displayed. The part inside the area is displayed, and the part outside the area is hidden.

4. How do I add a gradient overlay to my background image?

It is useful when you want to put some text on an image but the background is too light for the text to be clear, and it can also improve the image itself.

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

5. How to Create a Grid Background Image

Create a nice background image using CSS Grid and CSS background-image

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>
body {
 margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  display: grid;
  grid-template-columns: 25fr 30fr 40fr 15fr;
  grid-template-rows: 20fr 45fr 5fr 30fr;
  grid-gap: 20px;
  .item_img {
    background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
  }
}

6. How to set background image as text color

By using a background image in conjunction with a background clip, you can achieve a beautiful effect of the background image on the text. It can be very useful in certain situations, especially when you want to create a larger text title that's not as boring as a plain color.

<body>
  <h1>Hello world!</h1>
</body>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
}

h1 {
   background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Summarize

This concludes this article about 6 interesting tips for CSS background image settings. For more relevant CSS background image content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Mysql vertical table conversion to horizontal table method and optimization tutorial

>>:  Call js function or js variable in html's img src="" to dynamically specify the image path

Recommend

MySQL FAQ series: When to use temporary tables

Introduction to temporary tables What is a tempor...

Detailed explanation of fuser command usage in Linux

describe: fuser can show which program is current...

How to operate json fields in MySQL

MySQL 5.7.8 introduced the json field. This type ...

How to view the creation time of files in Linux

1. Introduction Whether the creation time of a fi...

Let’s take a look at JavaScript precompilation (summary)

JS running trilogy js running code is divided int...

Vue Basic Tutorial: Conditional Rendering and List Rendering

Table of contents Preface 1.1 Function 1.2 How to...

How to implement online hot migration of KVM virtual machines (picture and text)

1. KVM virtual machine migration method and issue...

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mal...

Learn Vue middleware pipeline in one article

Often when building a SPA, you will need to prote...

Implementing a simple timer in JavaScript

This article example shares the specific code of ...

In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity

1. Introduction to Data Integrity 1. Introduction...

Syntax alias problem based on delete in mysql

Table of contents MySQL delete syntax alias probl...

4 flexible Scss compilation output styles

Many people have been told how to compile from th...

CSS navigation bar menu with small triangle implementation code

Many web pages have small triangles in their navi...

Example operation MySQL short link

How to set up a MySQL short link 1. Check the mys...