CODEWITHSUNDEEP
htmlcss
morganchees
morganchees

Reputation: 117

Div with a transparent background inside div with a repeating background

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>

Upvotes: 0

Views: 102

Answers (3)

monikapatelIT
monikapatelIT

Reputation: 1007

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

Upvotes: 0

nocturns2
nocturns2

Reputation: 661

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>

Upvotes: 0

Eric N
Eric N

Reputation: 2206

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

#div1 {
    padding-top: 488px;
}

Upvotes: 1

Related Questions