Div with a transparent background inside div with a repeating background

Question

I have a #div1 with 100% height and #div2 inside #div1. #div2 located at the top of #div1 with semi-transparent background. But, because the #div1 have a repeating background, translucent under the #div2 is the background of #div1. I want to "move" the background of #div1 from the top of the height of #div2

see image

CSS:

#div1 {
    border: none;
    width: 812px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
}
#div2 {
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}

HTML:

<div id="div1">
<div id="div2">
</div>

`#div1 { background-position: ???px 0px ]` where `???` is the `#div2`'s height. — Xenos, Oct 12 '16 at 15:26
I think it would be simpler for you to just put div2 first and div1 second, not on top of each other, if that's the effect you're going for. — nocturns2, Oct 12 '16 at 19:01
I cannot change the markup, just CSS. Your answer below was perfect — morganchees, Oct 13 '16 at 04:20

score 1 · Answer 1 · answered Oct 12 '16 at 15:52

1

Give div1 a little window to show through by giving it padding-top. http://codepen.io/amishstripclub/pen/VKdjmr

#div1 {
    padding-top: 488px;
}

answered Oct 12 '16 at 15:52

Eric N

2,136
13
13

Not working. Or maybe I don't understand something. If in code to replace the background image on I have given above (#div1 -http://i.imgur.com/tcPWRzF.png, #div2 - http://i.imgur.com/DnDnz22.png) , the situation is this: http://take.ms/zeJkr – morganchees Oct 12 '16 at 16:10

score 0 · Accepted Answer · answered Oct 12 '16 at 18:08

For some reason that image in div1 isn't repeating. I don't know if this will work for you, but you can play around with it.

<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
#div1 {
    position: relative;
    top: 75px;
    border: none;
    width: 812px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
}
#div2 {
    position: relative;
    top: -75px;
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}
</style>
</head>

<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

score 0 · Answer 3 · edited May 23 '17 at 12:16

try flexbox alternative for block level alignment

#div1 {
    border: none;
    width: 812px;
    min-height:1200px;
    height: 100%;
    background-image: url(http://i.imgur.com/tcPWRzF.png);
    background-repeat: repeat-y;
    margin: 0 auto;
     display: flex;               /* establish flex container */
    align-items: center;  
}
#div2 {
    background-image: url(http://i.imgur.com/DnDnz22.png);
    background-color: transparent;
    background-position: center;
    width: 812px;
    height: 488px;
}

<div id="div1">
<div id="div2">
</div>

PC : Michael_B

Div with a transparent background inside div with a repeating background

3 Answers3