I am trying to absolute position 2 background images within psuedo elements (the reason for this is because I want to have control over the images so that they do not encroach on the innerDiv when the screen width is reduced, and if the screen width is enlarged the background images can reveal their full width.
I’ve got the :before element working perfectly, but the :after element seems to push extra padding on the right hand side of the page, which I don’t want. Is there a way of positioning to the right of an element using negative margins without adding extra padding to the page?
The following image is a visual explanation of what I am trying to achieve.
body {
margin: 0;
padding: 0;
}
.outerDiv {
background-color: #434244;
color: #FFF;
position: relative;
z-index: 10;
}
.innerDiv {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding-left: 10px;
padding-right: 10px;
background-color: #F96;
position: relative;
}
.innerDiv:before {
content: "";
background: url(../images/750x750-1.png) 0 0 no-repeat;
position: absolute;
height: 750px;
left: -750px;
top: 50px;
width: 750px;
visibility: visible;
}
.innerDiv:after {
content: "";
background: url(../images/750x750-2.png) 0 0 no-repeat;
position: absolute;
height: 750px;
margin-right: -750px;
right: 0;
bottom: -200px;
width: 750px;
visibility: visible;
clip: rect(0px,750px,550px,0px);
z-index: -10;
}
<div class="outerDiv">
<div class="innerDiv">
<!-- Inner Div Content -->
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
<p>This is the text...</p>
</div>
</div>
Had a think again and this version uses the pseudo elements no extra mark up needed. The only caveat is that it uses calc for the right element meaning older browsers will get the scrollbar (not a bad compromise).
Note than in this example the images are not fixed positioned like the other example and therefore the bottom right image will be at the bottom of the content rather than the bottom of the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://coothead.co.uk/images/">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
margin: 0;
background-color: #19192b;
color: #eee;
}
#container {
display: table;
width: 100%;
padding: 1em 0;
}
#container div {
display: table-cell;
}
#container div:first-of-type,
#container div:last-of-type {
width: 20%;
background-repeat: no-repeat;
background-size: 95% auto;
}
#container div:first-of-type{
background-image: url(plate1.png);
background-position: 0 0;
}
#container div:last-of-type{
background-image: url(plate2.png);
background-position: 100% bottom;
}
@media screen and (max-width: 30em) {
#container div {
display: block;
width: auto;
padding: 1em;
}
#container div:first-of-type{
display: block;
width: auto;
padding: 44.44% 0 0;
background-image: url(plate1.png),url(plate2.png);
background-position: 0 0, 100% 0;
background-size: 30.34% auto, 33.33% auto;
}
#container div:last-of-type{
display: none;
}
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p><p>
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
</p><p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
<div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://coothead.co.uk/images/">
<title>hi-lo images</title>
<!--
https://www.sitepoint.com/community/t/absolute-position-psuedo-element-to-right-using-negative-values/238327/4
ikandee
-->
<style media="screen">
html,body {
width:100%;
height:100%;
}
body {
background-color:#19192b;
color:#eee;
margin:0;
}
#outer {
height:100%;
}
#outer .left,
#outer .right {
width:20%;
max-width:250px;
min-width:150px;
height:100%;
background-size:contain;
background-repeat: no-repeat;
outline:1px dashed yellow;
}
#outer .left {
float:left;
background-image: url(plate1.png);
background-position: 0 0;
}
#outer .right {
float:right;
background-image: url(plate2.png);
background-position: 100% bottom;
}
#outer .content {
overflow:hidden;
padding:1em;
}
</style>
</head>
<body>
<div id="outer">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p><p>
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
</p><p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
</div>
</body>
</html>
I confess, I “borrowed” @coothead’s images and text.
Good solutions both but the problem I see is that you are eating up the content space because your images stay on screen.
In my example the images slide off the screen just leaving the content.
The table approach can still be used and without extra mark-up something like this should do the trick.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>untitled document</title>
<style media="screen">
html,body{margin:0;padding:0;height:100%}
body {
margin: 0;
background-color: #19192b;
color: #eee;
}
#container {
display: table;
width: 100%;
height:100%;
}
.inner {
display: table-cell;
width:1170px;
padding:10px;
}
#container:before,
#container:after{
content:"";
display:table-cell;
background: url(http://placehold.it/750x750) no-repeat 100% 0;
}
#container:after{
background-image: url(http://placehold.it/750x750);
background-position: 0 100%;
}
@media screen and (max-width: 1170px) {
#container div {
display: block;
width: auto;
padding: 1em;
}
#container:before,
#container:after{display:none;}
}
</style>
</head>
<body>
<div id="container">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem. </p>
<p> Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper. </p>
<p> Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh. </p>
<p> Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh. </p>
</div>
</div>
</body>
</html>
Thank guys, your advice has been very helpful. Although the display:table route sounds good, I like @PaulOB suggestion using the calc option. It is interesting to see the various ways of achieving an outcome.