When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.
body,
html {
margin: 0;
padding: 0;
}
.gamepage {
position: relative;
height: 100vh;
width: 100vw;
background-size: 100%;
}
/* tabbar */
.header {
position: sticky;
top: 0px;
left: 0px;
height: 10vh;
width: 100%;
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
z-index: 2;
}
#home {
position: absolute;
top: 0px;
left: 0px;
border-style: groove;
}
#how2play {
position: absolute;
top: 0px;
left: 47px;
border-style: groove;
}
#character {
position: absolute;
top: 0px;
left: 137px;
border-style: groove;
}
/* link format */
a:link,
a:visited {
color: white;
text-decoration: none;
font-weight: bold;
}
/* background */
.background {
positon: absolute;
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
height: 100%;
width: 100%;
top: 72px;
left: 8px;
background-size: cover;
z-index: 1;
}
#title {
color: white;
position: absolute;
top: 90px;
left: 5px;
font-size: 35px;
font-family: Courier New;
}
#text {
color: white;
position: absolute;
top: 125px;
left: 25px;
}
#playbutton {
color: black;
position: absolute;
top: 360px;
left: 660px;
font-size: 55px;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<body>
<div class="gamepage">
<div class="header">
<div id="home">
Home
</div>
<div id="how2play">
How to Play
</div>
<div id="character">
Character List
</div>
</div>
<div class="background">
<div id="title">Murder Mystery</div>
<div id="text">Find the murderer, before it's too late...</div>
<a href="homepage/thegame1.html">
<div id="playbutton">Play Now</div>
</a>
</div>
</div>
</body>
I've Tried
Changing all values to %'s
Changing all the values using vh and vw.
This fixed some of the problem but not all
Played around with the absolute and relative positioning/adding div parent tags
All this is very new to me so there might be a simple solution I don't know of
Your HTML and CSS should look something like the example below.
Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid
Look into flexbox and grid for single axis and dual axis positioning
body {
display: grid;
grid-template-rows: 30% 1fr;
min-height: 100vh;
margin: 0;
color: white;
background-color: black;
}
header {
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
}
header ul {
display: flex;
gap: 1rem;
min-height: 10vh;
list-style: none;
}
a:link,
a:visited {
display: inline-block; /* Allows for padding and your rotation of [Play Now] */
color: inherit;
padding: .2em .5em;
background: #000b;
text-decoration: none;
font-weight: bold;
}
main {
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
padding: 2rem;
background-size: cover;
}
h1 {
font-size: 2.5rem;
font-family: Courier New;
}
.playbutton {
color: black;
font-size: 3.5rem;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
<nav>
<ul>
<li>
Home
</li>
<li>
How to Play
</li>
<li>
Character List
</li>
</ul>
</nav>
</header>
<main>
<h1>Murder Mystery</h1>
<p id="text">Find the murderer, before it's too late...</p>
Play Now
</main>
Related
I have a slightly rotated div creating an asymetrical graphic on my start page. I use overflow: hidden to hide the overlap from that div. Everything uses absolute positioning to get the elements exactly where I want them and vw and vh to make it responsive. It looks great while the aspect ratio is "normal" but when the window approaches a 2 or 3:1 aspect ratio (like an ultrawide monitor) everything overlaps. Narrow aspect ratio is not a problem since I have it switch to mobile view before it becomes a problem.
I considered using overflow: auto so it wouldn't be forced to fit in the viewport but then it's possible to see the edges of the rotated div.
Is there a solution to this or is this perhaps bad practice and should be done differently?
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.shape {
position: absolute;
right: -10%;
top: -50%;
height: 200%;
width: 45%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<body id="body">
<div class="shape"></div>
<div class="wrapper">
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
</div>
<div class="wrapper">
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
</body>
</html>
Thanks!
Welcome to Stackoverflow.
Putting the shape into the same container (I used the first wrapper) as your content should fix the problem. Why is this: Because the white shape should be in relation to your content. Also I did put the button in the same container.
And you dont need background-sizes for your body as it is just plain red.
I might have messed up your original dimensions, but this should do the trick.
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
background: red;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<div class="wrapper">
<div class="shape"></div>
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
May I please know how can I align the login button to the center of the page? I can't seem to do it althoughI've tried many suggestions from previous posts like this.
Need help on this.
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: 50%;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
You've given your button a position of absolute, so you're looking to also apply left: 50%. However, you probably actually also want to subtract the offset from your width, so that the element remains perfectly in the center. In this case, you're looking for left: 45%, as the element has a width of 10%. The same goes for top, which can be calculated with calc(50% - (48px / 2)):
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: calc(50% - (48px / 2));
left: 45%; /*calc(50% - (10% / 2)); */
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
Hope this helps :)
Is this what you want?
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This put the button at the center of the html.
body {
background: white;
margin: 0;
font-family: Arial;
}
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</body>
Add this:
button {
left : 50%;
}
.wrapper{
display: flex;
justify-content: center;}
<div class="wrapper">
<button> Sample </button>
</div>
.wrapper{
display: flex;
justify-content: center;
}
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>
In my first div container, I added a heading 1 tag, gave a border bottom a color of my desire, and added font awesome icon in the middle.
As you can see I had to give a background color on the font awesome to make it appear transparent. but now I have a background image on the second box so I am struggling to achieve the same thing.
How can I do the same on my other div box without affecting the background image
visibility as well as the border bottom from the heading 1?
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
h1.widget_title_1:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
</div>
I suggest you to use font-awesome icons along-with tag as here I have used i tag, it get's easy to align icon i.e. at center of that div tag, just by using text-align:center. Then you can use pseudo selector :before and :after on h1 tag and add that border. Scale to and fro on this jsFiddle and see border doesn't get's attached at certain screen resolution.
.container-1 {
height: 100px;
display: inline-block;
overflow: hidden;
}
.container-1 > .widget_title_1 {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container-1 > .fa {
font-size: 24px;
display: block;
height: 30px;
text-align: center;
}
.container-1 > .widget_title_1:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container-1 > .widget_title_1:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
.container {
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
height: 100px;
overflow: hidden;
}
.container > .widget_title {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container > .fa {
font-size: 24px;
display: block;
height: 30px;
width: 138px;
text-align: center;
}
.container > .widget_title:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container > .widget_title:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
Use :before :after for div for the line.
Create a span tag with the font awesome as shown below.
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
position: relative;
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
span:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
top:40px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: transparent;
}
div.container:after{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
width: 60px;
}
div.container:before{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
left:90px;
width: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<span></span>
</div>
I'm trying to create a badge, containing a hexagon with a number in it. The badge/list-item itself would contain some info/name.
this is what I have so far:
.item {
display: block;
background-color: blue;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
position: relative;
width: 65px;
height: 65px;
line-height: 65px;
text-align: center;
color: white;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
left: 30;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 65px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
This is what I'm trying to achieve:
As you can see, the "blue" background should only start at the tip of the hexagon. Width and height of it, aren't going to change. So now I'm wondering whether it would be easier to use an image or if someone could help me recreate the image, would be fine too :)
Thanks in advance!
Try the flexbox way, it's made for your case since you have three items (medal, title, description) that you want to have vertically aligned in the middle next to each other.
Below is a starting point, you can probably extend that to your needs by yourself.
Please note that I also changed the way the hexagon is created, it's not using an UTF8 character now but simply colored borders. This gives you more control about the size of the actual hexagon shaped medal.
Standing on one of its tips, the height of this hexagon is equivalent with its diameter (d) which in turn is twice as long as one of the six lines (s) forming the hexagon. The width (w) of this hexagon is then: s * sqrt(3) or .5 * d * sqrt(3).
.badge {
height: 64px;
margin-left: 35px;
color: white;
font-family: sans-serif;
background: blue;
border: 1px solid transparent;
display: flex;
align-item: middle;
}
.medal {
position: relative;
margin-left: -30px;
min-width: 75px;
}
.count {
position: absolute;
width: 58px;
text-align: center;
line-height: 64px;
font-size: 30px;
top: -16.74px;
}
h3 {
max-width: 40%;
margin-right: 30px;
font-size: 14px;
}
p {
font-size: .875em;
}
.hexagon {
position: relative;
width: 58px;
height: 33.49px;
background-color: #ff2600;
margin: 14.74px 0 16.74px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 16.74px solid #ff2600;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 16.74px solid #ff2600;
}
<div class="badge">
<div class="medal">
<div class="hexagon">
<div class="count">1</div>
</div>
</div>
<h3>The HEXAGON Badge Quest</h3>
<p>You successfully posted a valid question on Stack Overflow and received an answer.</p>
</div>
Try the following. I haven't tested on mobile. Just chrome at this point, but it should get you close. You'll need to play around with the text somewhat to handle the wrapping and sizing inside the blue bar, but your question was in regards to the badge. The corner effects are clipping the shape by about 10px. So setting a fixed height on the bar and a 10px taller height on the hexagon did the trick. Then just some positioning and margin to move things into position. Good luck.
.item {
display: block;
background-color: blue;
height: 66px;
position: relative;
left: 35px;
width: 100%;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
display: inline-block;
position: relative;
width: 66px;
height: 66px;
line-height: 66px;
text-align: center;
color: white;
top: 0;
left: -35px;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
width: 66px;
height: 66px;
line-height: 66px;
text-align:center;
left: -0;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 76px;
z-index: 1;
width: 66px;
height: 66px;
left: 0;
top: -5px;
}
.title {
position: absolute;
font-size: 1.75rem;
top: 12px;
left: 33px;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 20%;
line-height: 18px;
}
.info {
position: absolute;
top: 0px;
left: 20%;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 70%;
line-height: 66px;
vertical-align: center;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
I have a page which is structured into two main divs. One's a header which sits at the top of the page and there is one below it which is a container for the page content. The header can be seen in the code snippet below:
<link href="http://www.spareskills.com/css/compiled/theme.css" rel="stylesheet"/>
<body id="postajob">
<div class="header">
<div class="background-images img1 animated fadeInUpBig"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="animated bounceInLeft">Post a job.</h2>
<p>
Find a job by filling out your application below. It really is easy.
<br>
<span class="hidden-xs">Explain the job you need and people with the right skills will be in touch</span>
</p>
</div>
</div>
</div>
</div>
</body>
The relevant SASS/CSS is listed below:
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%;
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%;
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
You can see by resizing the snippet how the image behaves relative to the header. However this is all from hard coding pixels into the stylesheet as you can see.
My question is: How can I get the image to stick the bottom of the header as in the first snippet (when it is full size) no matter what the resolution or the device?
It doesn't need background images or the grid system. The Bootstrap docs correctly state that is something is always full width, then you don't need the grid system.
DEMO: https://jsbin.com/gomoca/1/
https://jsbin.com/gomoca/1/edit?html,css,output
HTML:
<section class="primary-page-header text-center">
<div class="container">
<h1>Title</h1>
<p>Text Goes Here</p>
<div class="page-header-img center-block">
<img src="http://placekitten.com/g/150" class="img-responsive img-circle" alt="" />
</div>
</div><!-- /.container -->
</section><!-- /.primary-page-header>
CSS:
.primary-page-header {
background: #f7f7f7;
border-bottom: 4px double #aaa;
padding-top: 5%;
}
.primary-page-header p {
padding-bottom: 2%;
}
.primary-page-header h1 {
font-size:24px;
}
.page-header-img img {
border:1px solid #aaa;
padding:3px;
background:#fff;
}
.page-header-img {
width: 50px;
height: 50px;
margin-bottom: -25px;
}
#media (min-width:600px) {
.page-header-img {
width: 100px;
height: 100px;
margin-bottom: -50px;
}
}
#media (min-width:768px) {
.page-header-img {
width: 150px;
height: 150px;
margin-bottom: -75px;
}
.primary-page-header h1 {
font-size:55px;
}
}
Looks like you have set left: 85% for the max size. It should stay on bottom if you set it to 45% just like the other sizes
#postajob {
-webkit-font-smoothing: antialiased;
.header {
background: $postajob_header_bg_color;
border-bottom: 1px solid $postajob_header_border_color;
height: auto;
padding-bottom: 20px;
h2 {
margin-top: 110px;
color: $postajob_header_text_color;
font-weight: 400;
font-size: 34px;
z-index: 100;
text-align: center;
#include max-sm {
margin-top: 95px;
font-size: 28px;
}
}
p {
font-weight: 300;
font-size: 17px;
color: $postajob_header_subtext_color;
z-index: 100;
text-align: center;
#include max-sm {
font-size: 14px;
}
}
.background-images {
width: 100%;
height: 50%;
&.img1 {
position: absolute;
background-repeat: no-repeat;
background-image: url('../../images/flat-icons/svg/paper-airplane.svg');
z-index: 3;
#include min-md {
background-size: 150px 150px;
top: 150px;
left: 80%; ----> Change this to 45%
}
#include max-md {
background-size: 100px 100px;
top: 180px;
left: 85%; ----> Change this to 45%
}
#include max-sm {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
#include max-xs {
background-size: 40px 40px;
top: 180px;
left: 45%;
}
}
}
}
}
I haven't tested this across browsers, but here's a solution using background image and a "padding height" trick. The #media queries are used to control which image is displayed at your desired breakpoints, to allow you specify higher-resolution images as the background image gets bigger.
For centering along the container's width, we use the position/transform trick (absolutely position the element, set left:50%, then translate the element -50% of its own width.
header {
padding: 2rem;
text-align: center;
position: relative;
}
header::after {
content: ' ';
border: 1px solid #009;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -2;
}
header::before {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
background-size: 100%;
background-repeat: no-repeat;
width: 10%;
height: 0;
padding-bottom: 10%;
}
#media screen and (max-width: 768px) {
header::before {
background-image: url(http://placehold.it/80x80);
}
}
#media screen and (min-width: 769px) {
header::before {
background-image: url(http://placehold.it/100x100);
}
}
<header>
This is a header with some content.
</header>