Background position test

Developer
Kevin
Size
1,674 Kb
Views
34,408
  1. Background position test Previews
  2. Background position test HTML Codes
  3. Background position test CSS Codes

How do I make an background position test?

What is a background position test? How do you make a background position test? This script and codes were developed by Kevin on 12 August 2022, Friday.

Background position test Previews
IQ Test

Background position test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background position test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cover top-l">left top</div>
<div class="cover top-c">center top</div>
<div class="cover top-r">right top</div>
<div class="cover cen-l">left center</div>
<div class="cover cen-c">center center</div>
<div class="cover cen-r">right center</div>
<div class="cover bot-l">left bottom</div>
<div class="cover bot-c">center bottom</div>
<div class="cover bot-r">right bottom</div>
</body>
</html>

Background position test - Script Codes CSS Codes

body { background: #111; }
.cover {	width: 30%;	height: 30%;	margin: 1.5%;	background-size:cover;	background-image: url(//unsplash.it/500/);	font-family: sans-serif;	color: #fff;	font-size: 12px;;	font-weight: bold;	line-height: 300px;	text-transform:uppercase;	text-align:center;	float: left;
}
.top-l {	background-position: left top;
}
.top-c {	background-position: center top;
}
.top-r {	background-position: right top;
}
.cen-l {	background-position: left center;
}
.cen-c {	background-position: center center;
}
.cen-r {	background-position: right center;
}
.bot-l {	background-position: left bottom;
}
.bot-c {	background-position: center bottom;
}
.bot-r {	background-position: right bottom;
}
Background position test - Script Codes
Background position test - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded August 12, 2022
Rating 3
Size 1,674 Kb
Views 34,408
Do you need developer help for Background position test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (kevinpowell) Script Codes
Name
Flexbox navigation bar
CSS Grid - Using line names
Awesome Portfolio demo
Simple Clearfix
Flexbox - Flexbox Container Properties
Flexbox grid with Sass
CSS Grid Area demo - the start
Nav bar with fun hover effect
Anchors
Collapsing divs with floats
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!