When I place fixed background image in div at top of screen that has width:100% and height:100% it gets covered up by the content that is supposed to be beneath it like this:
But when I use a pixel value for the height like 100px this occurs:
I want to be able to use width:100% and height:100% to be able to get a fullscreen fixed background image that doesn't get covered up.
HTML:
<div class="background">
<div class="hero">
<div class="arrow_down">
<a><i class="fa fa-angle-down"></i></a>
</div>
</div>
</div>
CSS:
.background {
position:relative;
top:0;
overflow:hidden;
height:100%;
width:100%;
}
.background .hero {
background-image: url('../images/background.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-attachment:fixed;
background-position:center top;
width:100%;
height:100px;
}
You should try using height: 100vh;, which is a tried and true method to solve this. I would test it on your website, but you didn't include it, so I'll post an example:
body{margin:0px;}
.background {
position:relative;
top:0;
overflow:hidden;
height:100%;
width:100%;
}
.hero {
margin:0px;
padding:0px;
background-image: url('http://www.funnycatpix.com/_pics/Arghhhh532.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-attachment:fixed;
background-position:center top;
width:100%;
height:100vh;
}
<div class="hero"></div>
<div class="background">
<div class="arrow_down">
<a><i class="fa fa-angle-down"></i></a>
</div>
</div>
Related
All I am trying to do is replace the black box with a box that will blur the background image. This is an over simplified version of my webpage. If I can just get this code corrected, I can figure out the rest.
Here's my example and code:
https://jsfiddle.net/no_u_turn/8ymc7xeb/1/
body {
background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
.top-box {
width:100%;
height:600px;
text-align:center;
padding-top:100px;
}
.blur-background-box {
width:300px;
height:300px;
background-color:black;
/*filter:blur(5px);*/
margin:0 auto;
padding-top:50px;
}
.solid-white-box {
width:200px;
height:200px;
background-color:white;
margin:0 auto;
}
.bottom-box {
width:100%;
height:1000px;
background-color:white;
}
<div class="top-box">
<div class="blur-background-box">
<div class="solid-white-box">
</div>
</div>
</div>
<div class="bottom-box">
</div>
Oh yeah, I need this done in CSS only, no JavaScript. Basically, I need the code to work with all browsers and across all devices.
I'll be working on this all night. Any and all suggestions are welcome! Thx in advance.
since you are using background-attachment:fixed; you can then apply the same background on the black box and you will have the needed effect. To avoid having the content blurred use a pseudo element:
body {
background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
.top-box {
width:100%;
height:600px;
text-align:center;
padding-top:100px;
}
.blur-background-box {
width:300px;
height:300px;
margin:0 auto;
padding-top:50px;
position:relative;
z-index:0;
}
.blur-background-box:before {
content:"";
position:absolute;
z-index:0;
top:0;
left:0;
bottom:0;
right:0;
background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
filter:blur(5px);
}
.solid-white-box {
width:200px;
height:200px;
background-color:white;
margin:0 auto;
position:relative;
z-index:1;
}
.bottom-box {
width:100%;
height:1000px;
background-color:white;
}
<div class="top-box">
<div class="blur-background-box">
<div class="solid-white-box">
</div>
</div>
</div>
<div class="bottom-box">
</div>
I have a background image and a rectangle made in css above it. What i need is, two semi circles should mask through this rectangle and background image should be seen through this rectangle as shown in the image.
You can do it like this
HTML:
<div id="wrapper">
<div id="rect"></div>
<div id="a">
</div>
<div id="b">
</div>
</div>
CSS:
#wrapper{
position:relative;
width:312px;
height:313px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#a{
position:absolute;
right:0;
height:120px;
top:100px;
border-top-left-radius:60px;
border-bottom-left-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;}
#b{
position:absolute;
left:0;
height:120px;
top:100px;
border-top-right-radius:60px;
border-bottom-right-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#rect{
width:100%;
height:56%;
position:absolute;
top:65px;
background:rgba(120,0,23,.8);
}
FIDDLE
Output:
Change the color and image as you want.!!!!
Also check this : https://stackoverflow.com/a/17751125/1542290
You can do this by controlling the opacity of the rectangle.
Something like this : (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
The following is the css code
.bckgrnd{
background:url('image.jpg');
width:1000px;
height:500px;
}
.rect{
position:relative;
width:700px;
height:200px;
background:pink;
opacity:0.5;
top:100px;
left:150px;
}
.semi{
height:100px;
width:50px;
background:url(image.jpg);
background-attachment:fixed;
position:absolute;
top:40px;
}
.right{
left:0;
border-radius :0 50px 50px 0;
}
.left{
right:0;
border-radius :50px 0 0 50px;
}
and the html mark up as follows
<div class="bckgrnd">
<div class="rect">
<div class="semi right"></div>
<div class="semi left"></div>
</div>
</div>
What I am trying to do is to make a 'portfolio' page. But I want it to 'perfectly fit' in the size of the users browser (so that, no matter what size of the screen the user is equipped with, the content of the page is always fully visible). Therefore, the page should be "resizable" and always show 100% width and 100% height on widescreen, desktop, tablet or mobile phone... and according to the size of the screen the inner div's should stretch (or shrink) to fit nicely in the browser.
This is what I have made so far but it's not good.
http://jsfiddle.net/MPQXF/50/
And when I resize the height or width of the screen the white frame (together with the eight blue frames pops out of the 'upper' part of frame. And it doesn't stretch or fit as I change the browser's size.
Btw, the blue frames should represent a small images (let's say 250x250).
<section id="home">
<div class="upper">
<div class="frame" align="center">
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
<div class="innerframe">
</div>
</div>
</div>
<div class="lower">
</div>
</section>
You have specified widths as percentages for some divs and for a few of them the width and height is fixed in px. If you want the desired behavior make sure everything is in %s.
I have modified your CSS to make everything in %s. Pls test and see if it works fine. It does on the fiddle.
html, body{
margin:0px;
padding:0px;
height:100%;
}
section{
height:50%;
width:100%;
}
div{
height:100%;
width:100%;
}
.upper{
background:orange;
}
.lower{
background: green;
}
.frame{
width: 35%;
margin-left: auto;
margin-right: auto;
top:15%;
height: 40%;
background: #f6f6f6;
position: relative;
border-radius:3px;
}
.innerframe{
width:20%;
background:blue;
display:inline-block;
border-radius:3px;
height:42%;
}
Use this css. your green div is also visible now
html, body{
margin:0px;
padding:0px;
height:100%;
}
section{
height:50%;
width:100%;
}
.upper{
background:orange;
}
.lower{
background: green;
height: 100%;
}
.frame{
max-width: 200px;
margin-left: auto;
margin-right: auto;
top:30px;
background: #f6f6f6;
position: relative;
border-radius:3px;
overflow: hidden;
}
.innerframe{
width:40px;
background:blue;
display:inline-block;
border-radius:3px;
height:40px;
}
i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out.
<div id="container">
<div id="left-image"></div>
<div id="main-containts">
<div id="data-containts">
data
</div>
</div>
<div id="right-image"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-center"></div>
<div id="bottom-right"></div>
</div>
</div>
div#container{
position:relative;
margin-left:120px;
margin-right:120px;
float:top;
padding-top:0;
margin-bottom:50px;
width:auto;
height:100%;
}
div#left-image{
position:absolute;
left:0;
width:28px;
height:100%;
float:left;
background:url(border-left.png) repeat-y;
}
div#right-image{
position:absolute;
right:0;
float:right;
width:30px;
height:100%;
margin-right:0;
background:url(border-right.png) repeat-y;
}
div#bottom{
position:absolute;
bottom:0;
width:100%;
height:36px;
z-index:100;
}
div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}
div#bottom-center{
height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}
div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;
}
If you are targeting the modern browsers only which supports css3. It could be easily accomplished by the css3 border-image property. Its worth to have a look at the property incase if you are not aware.
http://css-tricks.com/understanding-border-image/
Incase if you want your above code to work.Paste your div structure.
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.