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>
Related
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
I am rather new to HTML and CSS, and have been struggling to find a solution to a problem. The problem is that .wrapper2 with text and image is overlapping .wrapper1 with subheader. Here is the fiddle https://jsfiddle.net/c85frkjd/ .
Is would really appreciate the help:)
CSS:
.totalWrapper{
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
}
.wrapper1{
width: 964px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -50%;
margin-top: -10px;
}
.shrink-wrap{
width: 100vw;
height: 100%;
top: -5%;
position: relative;
overflow: visible;
display: inline-block;
}
.subSubHeaderImage{
width: 100vw;
height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right:-50vw;
background: url(http://localhost/wordpress/wp-
content/uploads/2017/04/sandwichmaaler.png) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
overflow: visible;
}
.subSubHeaderImageTekst h1{
width: 100%;
top: 35px;
align-items: center;
position: absolute;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-size: 36px;
color: #fff;
z-index: ;
}
.subSubHeaderImageTekst p{
width: 100%;
position: absolute;
top: 95px;
color: #a8adb1;
line-height: 26px;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-weight: 300;
font-size: 18px;
}
.wrapper2{
width: 964px;
height: auto;
margin: 0;
padding: 30px 0;
position: absolute;
z-index: 1;
}
.kolonne1{
float: left;
width: 100%;
height: auto;
margin-top: 40px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.kolonne1 img{
height: auto;
margin-top: -20px;
width: 85%;
}
HTML:
<div class="totalWrapper">
<div class="wrapper1">
<div class="shrink-wrap">
<div class="subSubHeaderImage">
</div> <!--end of .subSubHeaderImage-->
<div class="subSubHeaderImageTekst">
<h1>texttexttexttext</h1>
<p>texttexttexttextt</p>
</div> <!--end of .subSubHeaderImageTekst-->
</div> <!--end of .shrink-wrap-->
</div> <!--end of .wrapper1-->
<div class="wrapper2">
<div class="kolonne1">
texttexttexttexttexttexttext
<img src="http://localhost/wordpress/wp-
content/uploads/2017/04/burger_lille-300x200.png" alt="burger" width="350"
height="233"/>
</div> <!--end of .kolonne1-->
</div> <!--end of .wrapper2-->
<div class="push">
</div> <!--end of .push-->
</div> <!--end of .totalWrapper-->
They're both absolutely positioned and neither of them has a top. To keep them from overlapping, add position: relative to the parent, and a top value for .wrapper2 that will push it below the height of .wrapper1. Since .wrapper1 is 200px (height) - 10px (negative top margin), the top for .wrapper2 should be 190px
.totalWrapper {
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
position: relative;
}
.wrapper1 {
width: 964px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -50%;
margin-top: -10px;
}
.shrink-wrap {
width: 100vw;
height: 100%;
top: -5%;
position: relative;
overflow: visible;
display: inline-block;
}
.subSubHeaderImage {
width: 100vw;
height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url(http://localhost/wordpress/wp-content/uploads/2017/04/sandwichmaaler.png) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
overflow: visible;
}
.subSubHeaderImageTekst h1 {
width: 100%;
top: 35px;
align-items: center;
position: absolute;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-size: 36px;
color: #fff;
z-index: ;
}
.subSubHeaderImageTekst p {
width: 100%;
position: absolute;
top: 95px;
color: #a8adb1;
line-height: 26px;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-weight: 300;
font-size: 18px;
}
.wrapper2 {
width: 964px;
height: auto;
margin: 0;
padding: 30px 0;
position: absolute;
z-index: 1;
top: 190px;
}
.kolonne1 {
float: left;
width: 100%;
height: auto;
margin-top: 40px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.kolonne1 img {
height: auto;
margin-top: -20px;
width: 85%;
}
<div class="totalWrapper">
<div class="wrapper1">
<div class="shrink-wrap">
<div class="subSubHeaderImage">
</div>
<!--end of .subSubHeaderImage-->
<div class="subSubHeaderImageTekst">
<h1>texttexttexttext</h1>
<p>texttexttexttextt</p>
</div>
<!--end of .subSubHeaderImageTekst-->
</div>
<!--end of .shrink-wrap-->
</div>
<!--end of .wrapper1-->
<div class="wrapper2">
<div class="kolonne1">
texttexttexttexttexttexttext
<img src="http://localhost/wordpress/wp-content/uploads/2017/04/burger_lille-300x200.png" alt="burger" width="350" height="233" />
</div>
<!--end of .kolonne1-->
</div>
<!--end of .wrapper2-->
<div class="push">
</div>
<!--end of .push-->
</div>
<!--end of .totalWrapper-->
Since you are positioning .wrapper-1 and .wrapper-2 absolutely, this means you are essentially setting two pieces of paper directly on top of each other in a stack, so they can equally cover each other. If you position them relatively, then it would be like laying each piece of paper side by side on a flat surface. You could move the pieces around so one is above another, but they wouldn't overlap or cover each other unless you added some extra code. They would be positioned around each other. You could say, this piece is beside the other piece, or above or below, but not directly on top of or under. So to fix your issue, you need to change them to be positioned relatively.
I am trying to figure out how to place the logo in the middle of the two sections of my landing page but only on the mobile view. The text class is for my logo. I cant seem to figure out the best way to do so.
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
Here is the codepen: http://codepen.io/anon/pen/xqQPVN?editors=1100
Just give it position:absolute and set it accordingly for mobile devies..
Added the following css in the case of mobile.
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
Codepen link-http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100
Below is the snippet-
* {
box-sizing: border-box;
}
html,
body {
height: 100%
}
img {
max-width: 100%;
}
.item {
width: 50%;
float: left;
top: 0;
left: 0;
height: 100%;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
transition: .2s linear;
}
.nurseryarea {
width: 100%;
position: absolute;
text-align: center;
top: 45%;
color: #fff;
font-size: 30px;
font-family: 'times new roman';
font-weight: bold;
transition: .2s linear;
}
::selection {
color: #ebebe3;
background: #222;
}
::-moz-selection {
color: #ebebe3;
background: #222;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1);
transition-property: background-color;
}
.overlay:hover .nurseryarea {
opacity: 1;
transition-property: opacity;
}
.logo-big {
display: block;
width: 100%;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.imgsize {
width: 40%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
#media screen and (max-width:600px) {
.nurseryarea {
width: 100%;
}
.imgsize {
width: 60%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.item {
width: 100%;
float: left;
top: 0;
left: 0;
height: 500px;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
}
}
<div class="text">
<a class="logo logo-big" href="http://www.lygonstnursery.com">
<img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
</a>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;>
</div>
</div>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;>
</div>
</div>
</div>
If you want to have total control over the positioning i'd say go for progressively specific media queries (say: 425px, 375px, 320px) and use pixel positioning.
If you want to keep it generic, you must be prepared to have some small differences between these sizes, but you can use percentages and the result isn't so bad.
#media (max-width: 425px) {
.text {
position: absolute;
right: 34%;
left: 32%;
top: 34%;
}
}
I am trying to make a page that has two sections that stack on top of each other using rows. Each section is supposed to be the height of the browser window but for some reason the second row overlaps most of the first except for the header.
Here is a link to my code:
http://www.bootply.com/WwcepyZC01
If I understand your question correctly, you can do this using height: 100vh, and remove the position: absolute. I've also restructured your HTML a bit so that .layer2 is not a child of .layer1.
.layer1 {
width: 100%;
height: 100vh;
background-image: url(<%=asset_path "home_bg.jpg"%>);
background-size: cover;
background-color: purple;
}
.title-wide h1 {
top: 10%;
left: 10%;
right: 10%;
color: #ffffff;
font-size: 10vmax;
}
.home-caption {
position: absolute;
left: 20%;
right: 20%;
top: 30%;
}
.title-wide h2 {
color: #ffffff;
font-size: 4vmax;
}
.col-md-7 {
position: absolute;
text-align: center;
left: 15%;
right: 15%;
height: 100%;
top: 50%;
font-size: 10vw;
}
.btn-default {
background: rgba(255, 255, 255, 0.8);
}
.title-wide {
left: 90%;
right: 90%;
}
.btn-xlarge {
padding: 20px 20px;
font-weight: 700;
line-height: normal;
border-radius: 200px;
border: 2px solid none;
text-align: center center;
height: 3em;
font-size: 25px;
width: 10em;
}
.layer2 {
width: 100%;
height: 100vh;
background-size: cover;
background-color: green;
}
<div class="layer1 row-fluid">
<div class="title-wide text-center">
<h1>My Name</h1>
<div class="home-caption text-center">
<h2>I am a person working for a nameless corporation</h2>
<div class="row">
<hr>
<div class="offset4">
</div>
</div>
</div>
</div>
</div>
<div class="layer2 row-fluid">
</div>
<div id="push"></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>