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

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to move an image upwards in html/css

    css how to depend one div to another one in auto adjusting width

    How Do I Anchor tag in XSLT?

    How to remove a CSS class from all same level table rows When a Row is Selected?

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    how to change a css class style through javascript?

    How to make a layout scale with CSS?

    How to set Safari print margins via CSS to print borderless

    How to convert a HTML/CSS template to haml/sass template? [closed]

    PHP/CSS how to keep my checkboxs from going past my border

    How to set froala to calc height using css

    How to combine jquery codes with similar functions?

    How to defferent row heights for different rows in a single table?

    How to visually position image before heading element

    How can I get the body to continue look the same when a div inside overflows to the right?

    How to make input+label in a form appear one by one?

    How to make links work, regardless of location in directory structure?

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    How to use objects returned by a function?

    How to change css for active link based on the hashtag

    how to make a DIV responsive css html

    overlaying divs with onclick in slideshow -> onclick doesnt change

    How can I overlap 2 images on image product in Magento?

    creating a slide show for home page in my web site [closed]

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to draw heart with text in middle?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    how to move css element with scrolling left with Jquery?

    How to use CSS with Django forms?