Background Styles

Developer
Xavier Martínez
Size
3,501 Kb
Views
32,384
  1. Background Styles Previews
  2. Background Styles HTML Codes
  3. Background Styles CSS Codes

How do I make an background styles?

What is a background styles? How do you make a background styles? This script and codes were developed by Xavier Martínez on 28 September 2022, Wednesday.

Background Styles Previews
IQ Test

Background Styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background Styles</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<section class="skewed-bg">	<div class="content skewed"> <h1 class="title">SKEW EDGE</h1>	</div>
</section>
<div class="bkg-image"></div>
<section class="skewed-bg rounded">	<div class="content round">	<h1 class="title">SKEW ROUNDED</h1>	</div>
</section>
<div class="bkg-image"></div>
<section class="skew-hor">	<div class="content">	<h1 class="title">SKEW HORIZONTAL</h1>	</div>
</section> <footer> <div class="social"> <p>Xavier Martínez</p> <a href="https://twitter.com/xmjol" target="_blank"><p>@xmjol</p></a> </div> </footer>
</div>
</body>
</html>

Background Styles - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto");
body { background: #222; color: #FFF; margin: 0; overflow-x: hidden;
}
.wrapper { overflow: hidden;
}
section { font-family: "Roboto", sans-serif; font-size: 26px;
}
.bkg-image:nth-child(2) { height: 1300px; width: 100%; margin-top: -200px; margin-bottom: -900px; background-image: url("http://webs.thelis.es:8081/test/background1.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 0px -300px; background-attachment: fixed;
}
.bkg-image:nth-child(4) { height: 1300px; margin-top: -200px; margin-bottom: -900px; background-image: url("http://webs.thelis.es:8081/test/background2.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 0px 0px; background-attachment: fixed;
}
.skewed-bg { padding: 200px 0; transform: skewY(-8deg); margin-top: -200px; border-top: 8px solid white; border-bottom: 8px solid white;
}
.skewed-bg:nth-child(1) { background-color: #8BC34A;
}
.skewed-bg:nth-child(3) { background-color: #4FC3F7;
}
.skewed-bg.rounded { position: relative; border-bottom-left-radius: 150%; border-bottom-right-radius: 150%; padding: 300px 0; width: 150%; left: -200px;
}
.content { position: relative; z-index: 1; text-align: center;
}
.content.round { margin-top: -80px;
}
.content .title { padding: 10px; mix-blend-mode: screen; margin: 120px auto 0 auto; font-size: 4em; letter-spacing: 0.1em; background: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.skew-hor { height: 300px; position: relative; background: #FFD740; border-top: 8px solid white; margin-top: 200px;
}
.skew-hor:after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; bottom: -25px; transform-origin: right bottom; transform: skewY(-5deg); border-bottom: 8px solid white;
}
footer { height: 200px; background: #222;
}
footer .social { position: relative; top: 65px; right: 50px; margin-top: 20px;
}
footer p { text-align: right; font-size: 20px; font-family: "Roboto", sans-serif;
}
footer a { text-decoration: none; color: #B39DDB;
}
@media only screen and (max-width: 1200px) { .title { font-size: 1em; }
}
Background Styles - Script Codes
Background Styles - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded September 28, 2022
Rating 3
Size 3,501 Kb
Views 32,384
Do you need developer help for Background Styles?

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!

Xavier Martínez (xmjol) Script Codes
Name
Flex Side-content
React UI - 05 - Draggable SVG Path Generator
Locatifs-Info
Bottom Menu- Social
THRWidgets OldLib
React UI - 07 - Random Image Generator Giphy API
Let
THRWidgets
A beautiful day
ReactJS Simple Component
Create amazing sales emails 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!