I've looked around but it doesn't help that I don't even know the name of the effect.
What is the effect called which has a transparent div section with a large image behind it. It's similar to a paralax effect but I don't think it falls under that category.
Please see here: http://shield.nvidia.co.uk/
At the "All you favourite games to go." section.
I've seen it on lots of sites.
Another example here: http://www.wekeroad.com/
If I can at least know what the effect is named I can proceed to learn it.
Edit: Thanks guys, I thought it was some fancy effect. It's very simple, I made my own too just playing around: http://jsfiddle.net/uuepunx8/
html, body{
height: 100%;
width: 100%;
}
*{
padding: 0;
margin: 0;
}
.first{
width: 100%;
height: calc(100% + 100px);
background-color: red;
}
.second{
height: 50%;
background: url('http://hdwallpaper.freehdw.com/0004/3d-abstract_hdwallpaper_equations_33432.jpg') fixed 0 0;
}
Setting a main container's background to position:fixed; is what you're looking for. Your internal content will need to be big enough to scroll and have something breaking up the content, such as a margin-bottom: 300px:
.background{
background: url(http://lorempixel.com/300/300/) repeat;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
}
Here is a simple JSFiddle to play with.
I don't know the name, but that effect is not hard to implement using CSS.
All you have to do is add a background image to each of your scrolling divs (or other element type structuring your page) setting the background-attachment to "fixed".
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
I know it might be a duplicated question, but I couldn't find the answer anywhere else in the internet.
Question is very simple: I want to know how should/could I add shapes/decoration to the page layout correctly so it will not look broken inside a responsive container.
Click here to see the picture!
Actually I don't know the way to add that much shapes without making some mess in the code or completely braking the responsiveness of the container itself. If anybody already have done this, please describe your solution/method of doing this correctly. Thank you in advance and hope this will be useful to somebody else.
You should probably set a position : relative in the parent element and then use position: absolut; with relative unites.
Also take care to have a lower z-index for the decorations:
section {
background-color: rgb(69, 83, 95);
display: inline-block;
position: relative;
width: 70vw;
height: 70vh;
}
.content {
z-index: 2;
}
.element {
position: absolute;
z-index: 1;
color: white;
}
.element1 {
top: 20%;
left: 20%;
}
.element2 {
top: 80%;
left: 30%;
}
.element3 {
top: 50%;
left: 70%;
}
<section>
<span class="element element1">+</span>
<span class="element element2">*</span>
<span class="element element3">*</span>
</section>
As the decorations are just that, with no particular meaning that for example would be read out by a screen reader, I would put them in as background images - either as SVGs or gradients (if suitable) and position and size each one in terms of %s relative to the dimensions of the main element.
That way you have a responsive page and you haven't cluttered up the HTML with elements.
Each of the decorations seems separate, but if they overlap then remember the one that comes first in the background-image list will be shown on top of one coming afterwards.
So you are going to end up with CSS looking something like this:
background-image: url(svg1), url(svg2), url(svg3)...;
background-position: x1% y1%, x2% y2%, x3% y3%,...;
background-repeat: no-repeat no-repeat;
background-size: w1% h1%, w2% h2%, w3% h3%,...;
It's easy to work out the percentages, just use a ruler on the image - any units will do, and divide by the width or height of the main element as appropriate * 100.
Apologies if this has been asked before, but I've been checking quite a few other related threads and they've not been exactly what I'm looking for.
So I have a 1280x720 video that I was hoping to make my page's video background. I want it to scale to fit viewport height at all times, but NOT change aspect-ratio.
So this means that if the viewport ends up wider than 16:9, then I can have black-bars/letterboxing on the sides.
But if the viewport is narrower than 16:9, the sides of the video are cropped (I'm fine with this, as all important parts of the vid are in the center).
How would you suggest I do it? It's been driving me crazy.
I had the same issue earlier. This is how I resolved it.
.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}
The code is straight forward.
Well, without a working example it is hard to give a suggestion that will definitely work but here may be something that will send you in the right direction.
Create a wrapper around the video that has an absolute position and use flexbox to center the contents (the video) in the center of the page, then give it a black background. You can do that with something like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}
You may need to play around with the CSS for the video perhaps like this:
video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}
Something like that should give you the results you are looking for, or at least close to them. (I did not test this though)
Hope this at least gives you some ideas if it does not work. In the future, it is best to add your current code to make it easier for us to see what you have actually tried.
Platform: Wordpress (self-hosted)
Template: TwentyTen
I've been able to work out most things by Googling or tinkering around with familiar parts of the stylesheet, but I'm stuck now and am hoping someone can help me out. Basically, I’d like to create a header that is similar to this in design (http://albertaspeechie.blogspot.com) in that part of the header background will be transparent.
If I create an image with a transparent section, it shows as white because it's still within the header/wrapper with its white background.
I'm thinking that, possibly, setting the header background as transparent (though I can't figure out how to just make the header transparent, without affecting the rest of the wrapper) and boosting the padding above the wrapper. and increasing the height of the header. I used to know how to increase the height of the header, but I can't seem to find it anywhere anymore.
Any advice as to how I could do this? I'm only bumbling around with a test blog at the moment, so there's no published site to show. It's just a straight twentyten at the moment, without any adjustments until I can figure out how to do a partly transparent header.
Thanks in advance.
Edit: I'm not sure why people are downvoting this. I've followed the rules and instructions.
You can use positioning to move the image outside the header.
Add the image you want to use to inside your header. Make sure the image has a transparent background - use a png file for example.
Add position: relative to the header
Add position: absolute to the image, and then provide coordinates for the image.
To position it outside the header, provide a negative value for top. To center the image add 0 to left and right, and then use margin: auto.
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
background: lightblue;
}
.wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
background-color: lightyellow;
margin-top: 150px;
}
.header {
background-color: white;
width: 100%;
height: 200px;
position: relative;
}
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper">
<div class="header">
<img src="http://placehold.it/250x250" alt="" />
</div>
</div>
Codepen Demo
Read more about positioning here.
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.