How can I have a transparent overlay and center with flex box?


Tags: html,css,flexbox

Problem :

I have a block element with a background image. I am attempting to:

  • Add a transparent gradient overlay on top of a background image
  • Center another block element using flexbox,

I have already achieved both of these independently of each other, see the CodePen as well as the images and code below.

Using the transparent overlay (with the child block HTML removed):

enter image description here

Centering the child block (with the overlay CSS removed):

enter image description here

However when I try and combine the effects, the flexbox stops working and the overlay is missing around the child block enter image description here

Here is my HTML

<div class="container">
  <p>title goes here</p>
</div> 

Here is my CSS:

.container {
  background: url("http://msue.anr.msu.edu/uploads/images/forest.jpg");
  height: 400px;
  width: 100%;
  box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71);
  background-size: 100% auto;
  z-index: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.container p {
  display: block;
  color: red;
  text-align: center;
  font-size: 24pt;
  background-color: blue;
  z-index: 2;
}
.container:after {
  content: '';
  background: linear-gradient(135deg, #dc4225, #292484);
  width: 100%;
  height: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
  position: relative;
}

How can I get the semitransparent overlay overlay and the flexbox happening at the same time?



Solution :

For .container:after, change position: relative to position: absolute.

Live, working example:

.container {
  background: url("http://msue.anr.msu.edu/uploads/images/forest.jpg");
  height: 400px;
  width: 100%;
  box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71);
  background-size: 100% auto;
  z-index: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.container p {
  display: block;
  color: red;
  text-align: center;
  font-size: 24pt;
  background-color: blue;
  z-index: 2;
}
.container:after {
  content: '';
  background: linear-gradient(135deg, #dc4225, #292484);
  width: 100%;
  height: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
  position: absolute;
}
<div class="container">
  <p>title goes here</p>
</div> 

Codepen Version: http://codepen.io/anon/pen/gpqxoo


    CSS Howto..

    How to use CSS with javascript

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How do I refresh the qtip label to display new label for specific button on hover?

    Dynamic HTML 3 layers nested quotes - how to do?

    How apply css to div in catch statement using jquery

    onsen ui 2 : how to implement android style scrollable tabbar?

    How to specify styles for h:panelgrid in jsf

    How to preform whitelist-based CSS filtering in PHP

    How does reddit create the top header without any margins?

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    CSS question how to make one div appear over another?

    css: How to change row color of a table after its been selected and clicked away

    How to ignore CSS img styling for certain sections of the website?

    How to determine largest possible font-size such that it fits on one line in CSS [closed]

    How i can change a css of an input[“file”]? [closed]

    How to increase height of footer's div when browser window is resized?

    How can I select the first paragraph in this code?

    How to add delay in css hover on a div that was displayed none?

    how to encode .css file?

    How to re-use common css rules in css( sass ) [closed]

    How can I use jQuery to hide or show table rows based on asp.net role?

    How to make nav menu fall onto the page?

    How to make text go over a CSS background img

    How to force wrapper div to keep its optimal width according to its children

    How to style form use css [closed]

    How do I load a nested web page in a
    tag using only javascript and html?

    how can i change the style of scroll bar

    how to fire a jquery child function at the start of parent animation

    css - how to hide href link nested inside a div?

    Background color does not show up when scrolling to the right