I have a page with a huge background which is fixed - as in:
body {
background: url(...) no-repeat center center fixed;
}
Now, to remove some focus from the background image, I thought about simply blurring it at the moment the real content starts. Think about a transparent jumbotron, followed by one giant div containing all the content. An example markup:
<div id="navigation">
<nav>...</nav>
</div>
<div id="page">
<div class="transparent-jumbotron">
Big intro to the site goes here
</div>
<div class="content">
The actual content goes here
</div>
</div>
<div id="footer">...</div>
I have been trying out various hints and tricks on the internet - but the most I got was that #page.contents had the site's background - but upon scrolling a bit, it turned out that there was one instance of the background covering the original, and then there was the normal, unblurred background. This contents div also has a semi-transparent background applied through rgba() to darken the background.
So my question is: How can I blur the larger portion of a site, which has a fixed background image but much content that will require scrolling (as in, dynamicaly applying the blur filter)?
You should use opacity property in css
opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;
Related
I'm having problems making my "curtain" div transparent if it's outside the fixed DIV. In the example below I'd like to achieve transparency of the parallax-curtain DIV without having to place it inside the parallax DIV.
https://jsfiddle.net/0kfapw35/
I know it can be achieved if the DIVs are nested like so:
<div class="parallax">
<div class="parallax-curtain">
</div>
</div>
https://jsfiddle.net/wamosjk/jfxb0kz1/
Unfortunately, this doesn't work for me. Is that possible?
Thanks in advance!
The problem in your example is that if parallax-curtain is not a child of the parallax element, behind him it's only the body element, which is white. If your change the body element's background-color:red; you'll see that the transparency is indeed applied to parallax-curtain, it's just not visible in your example because it's the same color as the element behind him.
You can place the parallax element behind parallax-curtain, by adding position:sticky; z-index=-1; top:0;: https://jsfiddle.net/x837kwfb/60/
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.
The banner on this page here (a work in progress), has the following structure
<div id="top">
<div class="sidebox">
<div class="boxhead">
<h2>Chalets des Bouleaux</h2>
</div>
<div class="boxbody">
<p>Tel. 819-444-4444</p>
<p>Notre-Dame de Pontmain, Québec, Canada</p>
</div>
</div>
</div>
The div with class sidebox and all it's child elements make up the logo shown in the centre of the banner. The photo shown behind the banner is a background image of the top div. I would like the logo to appear as though it is floating on top of the photo, i.e. the photo shows through the white parts of the logo. Obviously this isn't happening at the moment, though I'm unsure why, because I've set the background color to transparent for all the elements of which the logo is composed.
Update:
The page that I linked to has changed so I've removed the link to avoid confustion. Please ignore this question and vote to close it!
The background of your GIFs are white! Make them transparent!
<div id="top" style="background-image:url(backgroundimagepath)">
<div class="sidebox">
<div class="boxhead">
<h2>Chalets des Bouleaux</h2>
</div>
<div class="boxbody">
<p>Tel. 819-444-4444</p>
<p>Notre-Dame de Pontmain, Québec, Canada</p>
</div>
</div>
</div>
Change it in this way and also sidebox should have a transparent background.
You need to replace the images of the sidebox with ones that have transparent backgrounds.
These images:
images/sbbody-r.gif
images/sbhead-r.gif
images/sbbody-l.gif
images/sbhead-r.gif
The following images will need to be recreated as 24-bit PNG's with semi-transparent backgrounds:
sbhead-l.gif
sbbody-l.gif
sbbody-r.gif
sbhead-r.gif
If you need the transparency in IE6 then you should use something similar to SuperSleight to patch up the holes.