Okay lets say I have a cooled tiled background like on this website.
http://www.leeslights.com/colors-shapes-sizes-and-prices.html
How would I make it so that the image tiles to the browser, but once it has done that it would become static, like the background is one this website.
http://www.worshipatthemountaintop.org/
This code below will work, it works on the tiled star image site, just replace what's in the brackets with your own image
background:url('ewExternalFiles/space_bg.gif')repeat fixed center;
I think the simplest solution to this is creating a separate div for page background with fixed position and full view size. Here is a Pen
HTML:
<div class="background"></div>
<div class="content">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<!-- and any other page content -->
</div>
CSS:
div.background {
position: fixed;
top: 0;
z-index: -100;
background-image: url("http://lorempixel.com/200/200/abstract/6/");
background-size: tiled;
width: 100%;
height: 100vh;
}
Some styling for the content:
div.content {
background: white;
width: 80%;
padding: 20px;
margin: 40px auto 60px auto;
}
Related
I’ve noticed some unexpected layout behaviour of flex content, namely it affects positioning of the unrelated elements on the page.
Scenario: I have div.container and div.content inside. div.container has the display set to inline-flex and centres div.content vertically.
Now, any content (that uses regular flow) I put after the container can’t go higher than the top of div.content.
When I add some free text after the div.container, it is aligned with the div.content top, even though it is completely outside the flex container and should be unrelated to it.
When I add another div.container, it is positioned the way its div.content is no higher that div.content of the previous, unrelated div.container. This container (or rather its div.content) in turn affects the position of the subsequent ones.
https://flex-content-affects-outside.stackblitz.io/
It looks as if the top of a div cannot be placed higher than the top of divs before it in the document flow.
In my case, this doesn’t affect inline-flex containers directly, but rather their content. The vertical position of the flex containers if affected as the result – so that their content is aligned.
This behaviour is visible in Chrome and IE11. On the other hand, in Firefox everything works as expected.
My question is: What causes such a behaviour? Is it in any way standardized?
In the example above isn’t a significant problem, we can wrap all the boxes in another flex to get the expected behaviour. However, I’m afraid that in more complex layouts some unexpected relations between seemingly independent content can ruin the layout.
Edit: I'm adding a code snippet.
.container {
font-size: 30px;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #888;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container .content {
width: 100%;
text-align: center;
background: rgba(200, 200, 200, 0.5);
}
<div class="container">
<div class="content">
Content.
</div>
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
As Paulie_D noticed in the comment, it was caused by vertical-align. Once we specify vertical-align: top everything works as expected.
.container {
font-size: 30px;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #888;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
vertical-align: top;
}
.container .content {
width: 100%;
text-align: center;
background: rgba(200, 200, 200, 0.5);
}
<div class="container">
<div class="content">
Content.
</div>
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Or, more elaborate one:
https://stackblitz.com/edit/flex-content-affects-outside-baseline-elwwvc?file=style.scss
More precisely, the layout was due to the implicit vertical-align:baseline (in Chrome and IE). The boxes are inline-flex and there were laid out according to the baseline. Once we specify this explicitly the behaviour is consistent among browsers. Another font size in one of the boxes makes it more visible.
https://stackblitz.com/edit/flex-content-affects-outside-baseline?file=style.scss
I am unable to remove the empty spaces around this clipped image. The original size of the image is 1200x800 but I want to show only a small section of this image at a certain point on the page. But in the background it still takes the size of the entire image creating all the space between the header, image and the content. Here's my Plunker code
CSS
img {
max-width: 100%;
clip-path: inset(248px 0 238px 0);
}
HTML
<body>
<h1>Header Here</h1>
<img src="http://via.placeholder.com/1200x800" alt="image" />
<div>
Contrary to popular belief, Lorem Ipsum is not simply random text.....
</div>
</body>
You can use this code for your solution:
#img {
position: relative;
width: 800px;
height: 100px;
overflow: hidden;
}
img {
max-width: 100%;
position: absolute;
top: -220px;
left: 0;
}
<div id="img">
<img src="http://via.placeholder.com/1200x800" alt="image" />
</div>
I was able to make it work by using the tool https://bennettfeely.com/clippy/.
I moved each of the points in the white space back 5%. This will give the clip-path mask more breathing room or bleed space.
Giving the path less space gives the image more room.
I'm working on a little design challenge, and it's getting the better of me right now.
Essentially, it's a material design card, which means when I click it it takes me somewhere else.
The easy route would be (and as it is now) is to surround the content with an anchor. However, in this case I ONLY want the anchor text to be "My keyword".
Here's the simple html output:
<a class="post-card md-card">
<div class="md-card-title aspect-16x9">
<div class="title-large"></div>
</div>
<div class="md-card-content">
<div class="sup-text"></div>
</div>
</a>
So, the 2 things I want to do are:
Only have the keyword inside the anchor
Be able click the whole thing (the link covers the entire outer div)
Here's the stuff that make it more difficult:
The blue box on top has an aspect ratio set, which means its not a
constant height
The text inside the blue box is centered using Flexbox
The white box isn't a fixed height either
Here's how the aspect ratio is calculated:
.AspectRatio(#widthRatio:16; #heightRatio:9; #useableWidth:100%) {
&:extend(.clearfix all);
overflow:hidden;
max-width:#useableWidth;
&::before {
content:"";
float:left;
padding-top:percentage(#heightRatio / #widthRatio);
}
}
So I need to keep the keyword text where it is but make the whole thing clickable.
I've been playing around with the idea an absolutely positioned anchor on top, which I can do but I can't get it to stretch to the bottom without moving the text.
Any CSS gurus got some ideas?
This should give you a good starting place...
.post-card {
background-color: #63d9ff;
box-sizing: border-box;
position: relative;
width: 200px;
}
.post-card * {
box-sizing: inherit;
}
.post-card .md-card-title {
bottom: 0;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.post-card .md-card-title .content-prop,
.post-card .md-card-title .content {
display: inline-block;
vertical-align: middle;
}
.post-card .md-card-title .content-prop {
padding-top: 56%;
width: 0;
}
.post-card .md-card-title .content {
padding: 1rem;
width: 100%;
}
.post-card .space-prop {
display: block;
padding-top: 56%;
}
.md-card-content {
background-color: grey;
padding: 1rem;
}
<div class="post-card md-card">
<a class="md-card-title aspect-16x9" href="#">
<span class="content-prop"></span><!--
--><span class="content">My Keyword</span>
</a>
<span class="space-prop"></span>
<div class="md-card-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris ut eros consectetur efficitur vitae at leo.
</div>
</div>
JSFiddle
So the explaination...
The whole post card is positioned relative, the anchor is then positioned absolute within it. The anchor is given a top, left, bottom, and right value of 0 which makes it cover it's parent container.
The content-prop and space-prop are given no height but have a top padding of 56%. This means that their top-padding value is 56% of their width which works out at a 16:9 ratio. The space banner is used here to add a empty gap at the top of the post card to make room for the anchor.
Both the content-prop and the content elements are set to display inline-block and vertical aligned to middle. Because the prop is taller than the content, the content floats in the centre. The HTML comment between these two elements eliminates white space so that the content div can be set to 100% width even when the prop is on the same horizontal row.
I currently have something like the following:
Basically it's just three divs contained in one container_div which has its width and height specified. CSS code for the container and the top div looks like:
.container_div{
width: 800px;
height: 500px;
}
.top_div{
width:100%;
height:100px;
}
What I am now trying to do is come up with CSS code for the center_div and bottom_div elements in a way that:
Bottom div has no overflow
Bottom div can grow/shrink without causing its parent element to change its size ( something like bottom:0 absolute positioning )
Whenever bottom div grows, center div shrinks and vice-versa.
This is what should happen when bottom div grows:
I am looking for a pure CSS solution. Firefox support is enough.
This can be easily achieved by a css table layout. In your case, involving table rows, that will (by default) automatically fill the space of it's display: table container.
In your case, just set:
The top div to be a fixed height
The middle div to be 100% height. This will squize the bottom div to its own content height.
The bottom div to be zero height.
body { margin: 0; }
#container {
display: table;
position: absolute;
height: 100%;
width: 100%;
color: white;
}
#container > div:nth-child(1) {
display: table-row;
height: 50px;
background: red;
}
#container > div:nth-child(2) {
display: table-row;
height: 100%;
background: green;
}
#container > div:nth-child(3) {
display: table-row;
height: 0;
background: blue;
}
<div id="container">
<div>div 1 (fixed 100px)</div>
<div>div 2 (expand to fill remaining space) </div>
<div>
div 3 (fit its own content)
loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet...
</div>
</div>
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial