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 8.0 user and role management principles and usage details

This article describes MySQL 8.0 user and role ma...

Code to enable IE8 in IE7 compatibility mode

The most popular tag is IE8 Browser vendors are sc...

Implementation of built-in modules and custom modules in Node.js

1. Commonjs Commonjs is a custom module in nodejs...

Getting Started Guide to MySQL Sharding

Preface Relational databases are more likely to b...

How to solve the error when connecting to MySQL in Linux: Access denied for user 'root'@'localhost'(using password: YES)

Preface Recently connected to mysql /usr/local/my...

Installation of various versions of MySQL 8.0.18 and problems encountered during installation (essence summary)

Summary: Problem solving records of MYSQL: No mat...

How to use environment variables in nginx configuration file

Preface Nginx is an HTTP server designed for perf...

translate(-50%,-50%) in CSS achieves horizontal and vertical centering effect

translate(-50%,-50%) attributes: Move it up and l...

Vue implements the function of calling the mobile phone camera and album

This article shares the specific code of Vue to a...

Detailed explanation of common methods of JavaScript String

Table of contents 1. charAt grammar parameter ind...

Example of usage of keep-alive component in Vue

Problem description (what is keep-alive) keep-ali...

Solution to the problem that the configuration file my.cnf in MySQL cannot be started due to permission issues

This article mainly introduces the relevant solut...

Analysis of the implementation process of Nginx high availability solution in production environment

Preparation: 192.168.16.128 192.168.16.129 Two vi...

How to deploy Go web applications using Docker

Table of contents Why do we need Docker? Docker d...

Detailed explanation of command to view log files in Linux environment

Table of contents Preface 1. cat command: 2. more...