Absolute position psuedo element to right using negative values

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>

Hi,

If you can add html then I would do it like this:

If not I will have to think again :slight_smile:

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.

Hi there ikandee,

here is a one possible solution…

<!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>

coothead

Here’s something you might play with:

<!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.

1 Like

Well, I better come clean too. :mask:

I also “borrowed” the images. :no_mouth:

Worse still, I even doctored them to suit my evil purpose. :smiling_imp:

coothead

3 Likes

Good solutions both but the problem I see is that you are eating up the content space because your images stay on screen.:slight_smile:

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>
1 Like

Personally, I would leave the plates of food out
altogether and just display the content. :mask:

The trouble is that arty-farty webpages, unfortunately,
seem to be all the rage. :scream:

My guess is that if @ikandee wants visual nonsense at
the start, then he probably wants it there at the end too. :no_mouth:

coothead

2 Likes

Thank guys, your advice has been very helpful. :slight_smile: 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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.