I am trying to accomplish an effect where it looks like the "container" div is inverting the background image of the "parent" div. From my research I can't seem to find a way other than the "parent" and the "container" being the same size with different backgrounds, and the "content" div masking the "container" div. Here is an image of what I would like it to look like.
Here is my HTML:
<div class="parent">
<div class="container">
<div class="content">
</div>
</div>
</div>
The "parent" div has a normal background, while the "container" div (same size as "parent") has an inverted version of the "parent" background (inverted via thrid party program, I am not trying to invert it via css).
My question is, what CSS do I need to apply to the "content" and "container" div to achieve a mask where the "container" div's background is only shown through the "content" div?
An idea is to play with background-clip and adjust padding to control how much background you will show from the inner container:
.container {
height: 300px;
background: url(https://picsum.photos/1000/800?image=1069) center/cover;
}
.content {
height: 100%;
background: url(https://picsum.photos/g/1000/800?image=1069) center/cover;
background-clip: content-box;
padding: 100px calc(100% - 300px) 100px 50px;
box-sizing: border-box;
}
<div class="container">
<div class="content">
Some text
</div>
</div>
This can also be done with one container and multiple backgrounds:
.container {
height:300px;
background:
url(https://picsum.photos/g/1000/800?image=1069) center/cover,
url(https://picsum.photos/1000/800?image=1069) center/cover;
background-clip:
content-box,
padding-box;
padding:100px calc(100% - 300px) 100px 50px;
box-sizing:border-box;
}
<div class="container">
Some text
</div>
You could use mix-blend-mode though it will affect any contents of the .content div.
.container {
height: 300px;
background: url(https://picsum.photos/1000/800?image2045) center/cover;
padding: 50px;
}
.content {
width: 220px;
height: 180px;
background: white;
mix-blend-mode: difference;
box-sizing: border-box;
}
<div class="container">
<div class="content"></div>
</div>
Related
I'm trying to create an effect where I have a tall bordered div, with 3 equally sized divs inside of it, each inner div with its own background color.
I thought the css "math" would be easy for this, but my results look wrong.
<html>
<head>
<style>
#main {
height: 156px;
width: 52px;
background: #CECECE;
border: 4px solid gray;
border-radius: 4px;
}
.inner {
width: 52px;
height: 52px;
}
#i1 {
background: green;
}
#i2 {
background: red;
}
#i3 {
background: blue;
}
</style>
</head>
<body>
<div id='main'>
<div id='i1' class='inner'></div>
<div id='i2' class='inner'></div>
<div id='i3' class='inner'></div>
</div>
</body>
</html>
JS Fiddle example
Does anyone know why part of my main div's background is showing through inside of its border and how I can fix it?
In case the way your browser renders the fiddle is different than mine (I'm using Chrome), here is what I see (my problem is the light gray showing through from the main div background on the inside top, left and right of my border):
My browser's rendering
I would simplify the CSS: Erase the height setting from #main and the width setting from .inner. That way the inner DIVs will fill the whole width of #main, and #main will get its height from its content - the three inner DIVs.
#main {
width: 52px;
background: #CECECE;
border: 4px solid gray;
border-radius: 4px;
}
.inner {
height: 52px;
}
#i1 {
background: green;
}
#i2 {
background: red;
}
#i3 {
background: blue;
}
<body>
<div id='main'>
<div id='i1' class='inner'></div>
<div id='i2' class='inner'></div>
<div id='i3' class='inner'></div>
</div>
</body>
I'm pretty sure your zoom level isn't on 100%. Left is a screenshot of your image, middle is how my Chrome renders it on 100%, right is my Chrome on 80%. I can't seem to reproduce your exact zoom level, but as you can see, similar issues show up at different zoom levels...
I have this <div> with a radial-gradient on it, however I don't want it to be over all the <div> but rather I'd like it to go some amount down and then repeat.
So to be clear I don't want the gradient to stretch over the div like this
But rather repeat across the div at a certain height like this
You need to add a selector, class or id to your div.
.container{
height: 500px;
background: red;
background: radial-gradient(red, yellow);
width: 100%px;
}
.content{
position:absolute;
top: 20%;
left: 35%;
width: 300px;
height: 150px;
background:
}
<div class="container">
<div class="content">
</div>
</div>
Please Ignore the positions, and etc...
Only focus in the class container and content. That the css of gradient background only affect the div that has the class.
Check this: JSFiddle
I have a page with stacked divs and the divs are added dynamically in a block fashion. It has to cover 100% of viewport height and show scrollbar when content goes beyond viewport. The issue I am facing is outer-div has to have a background-color. When given a min-height of 100% to this div and applying height:1px fix so that child div inherits 100% height, I get the desired effect as in child inside parent with min-height 100% not inheriting height
However, the background color doesn't extend to full height. The nested divs and the mechanism to add divs dynamically is mimicked here:
https://jsfiddle.net/b859L1gs/
$(document).ready(function() {
$("#clickme").click(function() {
$(".two").append(" < div class = 'region' > < /div>")
});
})
html {
height: 100%;
}
body {
height: 100%;
}
.one {
min-height: 100%;
height: 1px;
background: green;
}
.two {
height: 100%;
}
.region {
height: 200px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="one">
<div class="two">
<div class="three">
...
<div class="region">
</div>
<button id="clickme">
here
</button>
</div>
</div>
</div>
</body>
</html>
Click the button to expand the divs and see the height expand but not the background-color. Note that the constraint as per application is to but background-color only at first outermost div and not to body.
You need to give background: green; to .region. Then it will expand background color.
.region{
height:200px;
border:1px solid red;
background: green;
}
Working Fiddle
Why do you set height: 1px and min-height: 100%?
Try this:
.one {
background: green;
}
I have to create a page with this structure:
Where the RED part has width = 100% and BLUE (and GREEN) part has width 885px.
I thought to create different width, some with width = 885px and the others with width 980px... but I think this is not the right approach... in fact if I have to change the width for example from 885px to 980 px
Another solution I think could be to have to div... the first one has width 100%; the second one, inside the first one, has width 885px. But I think could be difficult to place the green div at the same height/top of the red one on the back.
Which approach would you used to reach the goal?
Thank you
You need to manage simple html like below:
<div class="wrapper">
<div class="wrap"></div>
</div>
.wrapper{
width: 100%;
}
.wrap{
width: 885px;
margin: 0 auto;
}
When you only need full width div don't include .wrap in your html. And when you only need 885px width div exclude .wrapper in your html.
I made a quick example of how you could do this right here. I just made two classes, one that has a width of 100% (red div), and one that has a fixed width (blue div, I used 450px in my example). The green div is just a blue div inside a red div. I hope my example answers all the questions you have. Good luck!
I guess you can manage the red with green band and sencond red band positioning absolutely in a main container, that also contains the blue one with a width. To explain it better i've created a JsFiddle please follow the link to see it working:
Working example
I've use the approach suggested #C-link Nepal, but I think to put red bars this isn't enough.
HTML:
<div class="top"></div>
<div class="main">
<div class="redgreen">
<div class="green"></div>
</div>
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="foot">
</div>
CSS:
.top {
background-color: red;
height: 50px;
}
.main {
text-align: center;
position: relative;
}
.green, .blue {
width: 600px;
margin: 0 auto;
}
.redgreen {
width: 100%;
background-color: red;
position: absolute;
top: 30px;
}
.red {
height: 30px;
position: absolute;
top: 150px;
background-color: red;
width: 100%;
}
.green {
background-color: green;
height: 100px;
}
Please note that most of CSS classes have height and background color to the pattern be drawn...
I want my website to have this horizontally split background look while keeping the content in a container of 980px, like this site http://votezachandleah.com/
I have done this by setting a height and background color to the divs but when i put them in the container it cuts the background color down to 980px...
#container {
margin: 0 auto;
width: 980px;
}
#another_section {
background-color: #66cc33;
height: 650px;
width: 100%;
}
#background {
background-color: #FFFFFF;
color: #333333
height:600px;
text-align: center;
width: 100%;
}
HTML:
<div id="container">
<div id="background">
</div>
<div id="another_section">
</div>
</div>
You should give the body the same colors as the container.