CODEWITHSUNDEEP
jqueryhtmlcss
nsilva
nsilva

Reputation: 5622

Set variable width of :before and :after elements in CSS

I have the following:

<div id="wrapper"></div>

#wrapper {
    position: relative;
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/fabric-bg.png);
    background-repeat: repeat;
    z-index: 2;
    width: 100%;
    height: auto;
}

#wrapper::before {
    content: '';
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-left-bg.png);
    background-size: contain;
    display: block;
    width: 516px;
    height: 2152px;
    position: absolute;
    left: 0;
}

#wrapper::after {
    content: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-right-bg.png);
    display: block;
    width: 826px;
    height: 2013px;
    position: absolute;
    right: 0;
    top: 0;
}

JSFIDDLE HERE

Is there a way using CSS to reduce the size of the left and right background images using ::before and ::after?

At the moment they remain the same size, I want them to reduce in size depending on the browser width, is this possible with CSS without using a load of media queries? Don't mind using jQuery if I have to...

Upvotes: 1

Views: 233

Answers (2)

Aaron
Aaron

Reputation: 10450

I think what you're trying to do is something like this:

When using multiple background images the 1st layer/image is the top layer in the stacking order, the next/2nd image in the stacking order will display below that and so it continues... Finally apply standard background styles (size, repeat and position) add these in the same order as the images, seperating each with commas.

html,body {height: 100%;margin: 0;}
#wrapper {
  position: relative;
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-left-bg.png),
url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-right-bg.png),
url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/fabric-bg.png);
  background-repeat: no-repeat, no-repeat, repeat; /* 1st, 2nd, 3rd image */
  background-position: top left, top right, center center;
  background-size: 20% 100%, 20% 100%, 300px 222px;
  width: 100%;
  height: 100%;
}
<div id="wrapper"></div>

Upvotes: 2

Nutshell
Nutshell

Reputation: 8537

Something like this ?

See this fiddle

#wrapper {
    position: relative;
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/fabric-bg.png);
    background-repeat: repeat;
    z-index: 2;
  width: 100%;
  height: 2000px;
}

#wrapper:before {
    content: '';
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-left-bg.png) no-repeat;
    background-size: contain;
    display: block;
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
  top:0;
}

#wrapper:after {
  content: "";
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/trampology-right-bg.png) no-repeat;
  background-size: contain;
    display: block;
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  z-index: 10
}

Upvotes: 1

Related Questions