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 5.7.12 installation and configuration tutorial under Mac OS 10.11

How to install and configure MySQL on Mac OS 10.1...

Improvements to the web server to improve website performance

<br />In the first section of this series, w...

About WeChat Mini Program to implement cloud payment

Table of contents 1. Introduction 2. Thought Anal...

InnoDB type MySql restore table structure and data

Prerequisite: Save the .frm and .ibd files that n...

Introduction to HTML for front-end developers

1 Introduction to HTML 1.1 First experience with ...

How to implement blank space in Taobao with CSS3

Make a blank space for Taobao: When you shrink th...

WeChat applet scroll-view realizes left-right linkage effect

WeChat applet uses scroll-view to achieve left-ri...

Detailed explanation of the problems and solutions caused by floating elements

1. Problem Multiple floating elements cannot expa...

Example of how to configure cross-domain failure repair in nginx

Nginx cross-domain configuration does not take ef...

Analysis of the underlying principle of MySQL multi-version concurrency control MVCC

Table of contents 1 Problems encountered in trans...

MySQL 5.7.19 (tar.gz) installation graphic tutorial under Linux

The first tutorial for installing MySQL-5.7.19 ve...

Solution to the problem of flash back after entering the password in MySQL database

MySQL database crashes after entering password an...

JavaScript implements double-ended queue

This article example shares the specific code of ...

How to understand SELinux under Linux

Table of contents 1. Introduction to SELinux 2. B...

How to switch between Vue production and development environments and use filters

Table of contents 1. Switch between production en...