1

I've got an image background in my #wrapper div and a 33% transparent white color "overlay" in the #lightbackground div (background: rgba(255, 255, 255, 0.33);). Now I want to revoke this transparent white color in the #footer div which is placed over the #lightbackground div:

enter image description here

The result should be something like that:

enter image description here

The position of the #footer div (depending y axis) is unknown! It's depending on the content shown in the #content div. The minimum height should be as large, that the #footer div is at the bottom of the html.

I used this trick to prevent the footer from beeing displayed at the middele of the page: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/. The problem is, that the wrapper and the lightbackground start after the header and end with the page. So they are also over my footer (as shown in the first picture). But I want the footer to have the original background image without any white overlay (see image 2).

Here's a simplified version of my project: https://jsfiddle.net/mab30m0e/ take a look at the comments in the js section!

One of my thoughts was to set the background image again to the #footer div, but it would have to be placed like the one in the #wrapper div and only the part of the background that's inside of the #footer div should show up.

5
  • What does your HTML look like? Can the size and position of div2 vary?
    – BoltClock
    Feb 14, 2015 at 11:22
  • No can do. If the parent transparency level is 50%, then the child, at 100% is still only 50% transparent. And 200% is an invalid value.
    – David
    Feb 14, 2015 at 11:22
  • @BoltClock the position does, the size is constant
    – Armin
    Feb 14, 2015 at 11:55
  • Any chance you could show us your existing HTML and CSS at all? This can help narrow down possible answers.
    – BoltClock
    Feb 14, 2015 at 12:32
  • @BoltClock Yes, I think that would be an good idea. I just have to simplify it a little, give me 10 minutes
    – Armin
    Feb 14, 2015 at 12:42

5 Answers 5

3

Updated answer

Based on your edits and the fiddle you provided, I think this is a good job for Flexbox:

  1. set the body to have at least the height of the viewport with min-height: 100vh
  2. make the header and footer non-flex with a fixed height of 80px with flex: 0 0 80px
  3. let <main> soak up the rest of the available space with flex: 1 1 auto

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  background: url(//placekitten.com/g/600/600) no-repeat center;
  background-size: cover;
}

header, footer, main {
  text-align: center;
}

header, footer {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80px;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: rgba(254, 254, 254, 0.33);
}

#content {
  width: 50%;
  margin: 0 auto;
}
<header>I'm the header. Yay!</header>
<main>
  <div id="content">
    <h1>I'm the content</h1>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
    <p>asdfasdfasdf adsfasdfasdf asdfadfasdf adfasdfasdf</p>
  </div>
</main>
<footer>I'm the footer. Bye!</footer>

12
  • I'll take a look at this in a view minutes
    – Armin
    Feb 14, 2015 at 13:18
  • *few; That would probably be a "horrible hack" for my originally desriped problem, but i discriped it wrong. take a look at the jsfiddle link I just added. If I would use this realy horrible solution, I would need sth like a min-height-position as the box without the white is in fact my footer...
    – Armin
    Feb 14, 2015 at 13:32
  • @Armin Sorry, I don't understand, and looking at your fiddle does not help either?
    – janfoeh
    Feb 14, 2015 at 13:39
  • take a look at the informaion I added to my question (EDIT3). Then you'll understand the main idea behind this project.
    – Armin
    Feb 14, 2015 at 13:53
  • 2
    @Armin that always depends on the audience and the purpose of the site. If by 'homepage' you mean 'personal site', then yeah, it should be fine. If it would be a site selling services to enterprise customers that are still stuck on IE8, not so much. It's always a good idea to install analytics such as Google Analytics, and to check regularly what browsers your audience uses.
    – janfoeh
    Feb 14, 2015 at 16:11
2

So I came up with an absolute horrible solution for you. I load the background twice and then move it accordingly in the "clear" div.

div {
  width: 300px;
  height: 120px;
}
#one {
  background: url('http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg');
  position: relative;
}
#two {
  background: rgba(255, 255, 255, 0.33);
  position: absolute;
  left: 0;
  top: 0;
}
#three {
  position: absolute;
  width: 150px;
  height: 100px;
  left: 50px;
  top: 10px;
  background: url('http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg');
  background-position: -50px -10px;
}
<div id="one">
  <div id="two"></div>
  <div id="three"></div>
</div>

Here is a JsFiddle with the code.

The key here is background-position. Set the clear div's dimensions and position and then move the background image. Remember to move the background image in the opposite direction that you moved your clear div. Hence the negative numbers on background-position.

Good luck, I really hope you find a better solution then this.

1
  • So, now there's just one more problem: the position of <div id="three"> varies. I don't know the background-position in context of div3. It would be the position (0,0) from the div1 or div2 context.
    – Armin
    Feb 14, 2015 at 12:08
2

Since height of header and footer is known, it is easy to draw an opaque overlay over the background image, like this:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: medium sans-serif;
  color: white;
}
#wrapper {
  min-height: 100%;
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, .33), rgba(255, 255, 255, .33)) no-repeat left 100px/100% calc(100% - 100px - 150px),
    url(https://i.stack.imgur.com/Lhcrj.jpg) left top /cover;
}
#header {
  height: 100px;
}
#content {
  padding-bottom: 150px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
}
<div id="wrapper">
  <div id="header">header - fixed height</div>
  <div id="content">content - auto height</div>
  <div id="footer">footer - fixed height + sticky</div>
</div>

Original Answer (see question)

You need one div with a background image and multiple opaque background images:

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  top    / 100% 50px,
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  bottom / 100% 50px,
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat left  50px   / 50px calc(100% - 50px - 50px),
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) no-repeat right 50px   / 50px calc(100% - 50px - 50px),
    url(http://lorempixel.com/output/nature-q-c-640-480-8.jpg) left top / cover;
}
<div id="bg"></div>

4
  • I had to open the preview in full screen to figure out what I was supposed to be looking at.
    – BoltClock
    Feb 14, 2015 at 12:06
  • same problem here: the position of the "no-transparent-white-area" varies in y axis
    – Armin
    Feb 14, 2015 at 12:13
  • @armin could you explain the issue? It is easy to play with the numbers. or you could use percentage values instead of hardcoded 100px.
    – Salman A
    Feb 14, 2015 at 12:33
  • Take a look at my question again, I've updated it, the former one didn't point out my needs.
    – Armin
    Feb 14, 2015 at 15:26
1

You can solve the "content" size problem with CSS3 calc:

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: #FFFF33;
    background-image: url(http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: right top;
}
#wrapper {
    text-align: center;
    height: 100%;
}
#header {
    height: 80px;
    overflow: hidden;
    width: 100%;
}
#lightbackground {
    /* Actually height works for me here, but perhaps my case's simpler */
    min-height: calc(100% - 160px);
    background: rgba(255, 255, 255, 0.33);
    overflow-y: auto;
}
#content {
    width: 80%;
    max-width: 1000px;
}
/* This has much in common with #header */
#footer {
    width: 100%;
    height: 80px;
    overflow: hidden;
}

and the same HTML you're using now. You do have the trouble of updating the "160px" to always be the sum of heights of header and footer, and you might find SASS useful for this.

5
  • would you update my jsfiddle, I don't know how to apply this changes.
    – Armin
    Feb 14, 2015 at 15:02
  • I have tried but it did not work (the content div did not auto-scroll). I placed the code here if you need it - serni.org/fiddle/armin and serni.org/fiddle/armin/1.html . Tested only with Firefox, later I'll check with other browsers.
    – LSerni
    Feb 14, 2015 at 16:23
  • Hey nice solution! With a few changes it works perfect: use min-height: calc(100% - 160px); istead of height: calc(100% - 160px); so it expands if the content is larger; Set the background in html, body so it fits the whole page. Please try it and update your Answer. Thanks
    – Armin
    Feb 14, 2015 at 16:47
  • Updated answer. I had placed height instead of min-height because I believed you wanted to fill the viewport; for the same reason I used the overflow-y scrolling. For your original question (you had header of 100px, footer of 80px) the numbers ought to be 180, 100, 80, and the #header and #footer classes aren't exactly identical.
    – LSerni
    Feb 14, 2015 at 17:19
  • Thanks, I updated this to be the answer because it has better browser compatibility than the flexbox solution and it's easier to use / less code. Great job ;)
    – Armin
    Feb 15, 2015 at 8:42
0

You could try defining:

 background-color: rgba(255,255,255,0.3);

Example: http://codepen.io/BrianDGLS/pen/zxRPMd

2
  • I think you missunderstood the problem. that sqare that is black at your example should be tranparent, so that the background without the 30% transparent white is shown. Please read my original post again. But thanks for your effort ;)
    – Armin
    Feb 14, 2015 at 11:59
  • The area without the 30% white overlay is'nt centered. I also don't know it's postion on y axis - it depends on the content
    – Armin
    Feb 14, 2015 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.