I have done some research on this, but none of the answers are helping me with my issue. Here is a JSFiddle to show what I have so far.
Problem:
I am having an issue when it comes to over flow, as you can see the
background image is overflowing the wrapper.
Next issue, The background image doesn't look to be auto filling to
the wrappers width. I'm assuming that when the overflow issue is
fixed that this might not be a problem anymore.
Lastly, when we can fix everything, is there a way to make the
wrapper extend to the height of the background image without
specifically setting the height myself.
Here is my code:
#wrapper {
margin: 0 auto;
width: 70%;
border: #000000 solid 1px;
overflow: hidden !important;
}
.content:before {
content: "";
position: fixed;
z-index: -1;
background-image: url(../images/10034277536_1454f4e382_background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
}
.content {
z-index: 0;
}
<div id="wrapper">
<div class="content">
Hello world
</div>
</div>
Thanks for any help.
Have a look at: https://jsfiddle.net/5mahg3fp/
.content {
position: relative;
background-size: cover;
}
.content:before {
position: absolute;
}
Positioning the element absolutey instead of fixed and relatively to #content will fix your first problem.
Setting the backgrund-size to cover makes the background grow to the size of the element.
To have an element automatically growing to the size of the background assigned you would have to insert the background as an actual image, positioned statically. The you could add your content to a absolutely positioned child that covers the whole area.
You can make it appear that your image is overflowing across the entire page, add gradient to the bottom of the image (for e.g. #029d7e), then set the background color as the gradient.
background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;
https://jsfiddle.net/24wkdof5/
If you want your child element to grow with your parent element, you need to mark both elements with height attribute (either 100% or fixed height).
Related
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
I have a div containing some text and a YouTube video. I used CSS to give it a grey background. I also set the position to 4.4 em from the top, 1% from the left, and made it 98% wide. I want the bottom of the div to be 4.4 em from the bottom, no matter the size or zoom of the browser. How can I do this? Can I use CSS, or is Javascript required? If you give an answer containing Javascript code, please don’t use jQuery.
div {
position: absolute;
left: 1%;
width: 98%;
top: 4.4em;
background: grey;
}
body {
width: 100%;
color: white;
}
EDIT: Here is my HTML:
<div>
<h1>A Heading</h1>
YOUTUBE VIDEO HERE
</div>
You could either use a border that is transparent to simluate the 4.4em gap at the bottom, or you could use the "calc()" css function https://www.w3schools.com/cssref/func_calc.asp
Example:
height: calc(100vh - 4.4em);
What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. I want to be able to highlight certain areas of text or form fields but have the form be responsive. Here's a link to an example: http://www.codeply.com/go/nufYSSEMir
As you can see the highlight div is position: absolute; so obviously it's going to stay exactly where it's at. I've tried using percents as top and left values but it doesn't scale with the background image. I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.
Thanks in advance for any and all suggestions.
As said by divix, you need to set position : relative to the parent div.
This will tell the browser that your highlight's position : absolute is absolute in reference to outerContainer.
Basically any position:absolute will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. If you don't have any parent that has a position set, it will just take the body as a reference
Edit: In order the get the right responsivness try this :
body {
background-color:#ddd;
}
#outerContainer {
background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
height: 960px;
margin: 0 auto;
max-width: 742px;
width: 100%;
position: relative;
}
#media only screen AND (max-width:742px){
#outerContainer {
height:0;
padding-top:129.5%;
}
}
#innerContainer {
background-color: rgba(0, 255, 0, 0.5);
border: 1px solid #000;
height: 8%;
left: 12%;
position: absolute;
top: 14%;
width: 30%;
}
Simply add position: relative; to the #outerContainer, it works for me.
I am having a div with before selector. I set the background of this div and added CSS blur filter to it. I need to change the background image of this pseudo element dynamically using javascript. When I manually give a location for the background, it works fine and I succeeded in setting the image dynamically by appending the style to the head tag but the image won't resize. I need the image to be stretched to the full width of viewport but it is displayed in its original size only. Here is my CSS and javascript
CSS:
.content-wrapper::before {
position: fixed;
z-index: -1;
display: block;
width: 100%;
height: 100%;
/* background: url(/landing/images/profile.jpg); */
background-size: cover;
-webkit-filter: blur(25px)brightness(.7);
-moz-filter: blur(25px)brightness(.7);
-o-filter: blur(25px)brightness(.7);
-ms-filter: blur(25px)brightness(.7);
filter: blur(25px)brightness(.7);
}
Javascript:
$('head').append('<style>.content-wrapper::before{background:url('+response.data.url+') no-repeat}</style>');
This is the result now:
Update: Solution
Alex's fiddle link in the comments section worked like a charm. I had to change the position:fixed and background to position:absolute and background-image
I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.