Skip to content

Instantly share code, notes, and snippets.

@gydoar

gydoar/background-internal-div.txt

Last active March 27, 2023 20:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gydoar/c8d29d3152d50811725d60dd8f5cfc9b to your computer and use it in GitHub Desktop.
Save gydoar/c8d29d3152d50811725d60dd8f5cfc9b to your computer and use it in GitHub Desktop.
Download ZIP
Background dependent on inner div.
Raw
background-internal-div.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.background{
background-repeat: no-repeat;
border-radius: 16px;
padding: 50px 0px;
background-size: calc(0.510 * 100vw);
width: 100%;
background-position: left;
position: relative;
}
.bg-in{
background: url('https://go2hr.pacecreative.ca/wp-content/uploads/2023/03/pexels-andrea-piacquadio-3801451@2x.png');
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-size: cover;
position: absolute;
border-radius: 16px;
width: 50%;
background-position: right center;
top: 0;
}
.border-r{
border-radius: 16px;
}
@media (max-width: 576px) {
.bg-in{
width: 100%;
}
}
</style>
<title>Document</title>
</head>
<body>
<div class="container-fluid px-0">
<div class="row">
<div class="bg-outside">
<div class="background col-12">
<div class="bg-in"></div>
<div class="col-md-8 offset-md-4 col-12 bg-info border-r p-5">
<div class="bg-success border-r text-white p-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusamus aut tempora. Numquam aperiam aliquam, ipsum explicabo voluptas deserunt debitis,
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusamus aut tempora. Numquam aperiam aliquam, ipsum explicabo voluptas deserunt debitis, \
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment