I've created a parallax scrolling effect using only CSS. However I'm struggling to understand why it's actually working. Can someone help explain.
HTML
<div class="image"></div>
<section class="content">
<p>TEXT GOES HERE</p>
</section>
CSS
.image {
background: url('http://s28.postimg.org/v6mfcxbyl/galaxy.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
.content {
width: 100%;
max-width: 750px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
background: #FFF;
width: 100%;
}
It looks like it has something to do with setting the background fixed on the image div.
Here's a working fiddle http://jsfiddle.net/pAjNr/
position:fixed and background-attachment:fixed mean that the element will not move in relation to the viewport. So however much you scroll, the title (position:fixed) and the background image (background-attachment:fixed) will not move. The thing that does move is the text (.content) which doesn't have position:fixed.
When the text crosses over the title, it has a higher z-index (and position:relative so the z-index is not ignored) so it hides whatever is underneath it (the title).
Statically fixed or relatively (according to document) position of the background image will create the background effect.
The title is positioned fixed with a z-index lower then the content this being covered by it on scroll.
The content below is just normal and on scroll it just covers all the fixed elements with lower z-index.
Setting the background to fixed will fix the background-image relative to the viewport, even when the element itself scrolls (see here with added border: Example 1 ).
You could as well position the .image element itself with position:fixed and add an offset for the .content element: Example 2 to achieve exactly the same effect.
Related
I am attempting to make a feature like https://www.artyofficial.com/ has.
When scrolling down, the bottom of the second image will appear while the first image starts to get cut away. How is something like this achievable with CSS? I would post a style sheet but unfortunately I don't even know where to begin here.
What you are looking for is the parallax scrolling effect
The most important property is the background-attachment: fixed; here.
I made you a JSFiddle easy as possible, take a look at it.
I would start by looking at the background-attachment property, it has a value of:
fixed The background is fixed with regard to the viewport
It is called as parallax effect. You can refer to link: Parallax Effect
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
You just need to give all your such consecutive div's background-attachment: fixed. Check the example below:
.panels{
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.panels:nth-child(1){background-image: url('http://lorempixel.com/400/200/sports/');}
.panels:nth-child(2){background-image: url('http://lorempixel.com/400/200/nightlife/');}
.panels:nth-child(3){background-image: url('http://lorempixel.com/400/200/cats/');}
.panels:nth-child(4){background-image: url('http://lorempixel.com/400/200/food/');}
.panels:nth-child(5){background-image: url('http://lorempixel.com/400/200/nature/');}
/* this is for hiding stackoverflow console */
.as-console-wrapper{ display: none !important; }
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
I'm building the following website for a client based on a WP premium theme. As you can see, I'm trying to set it so that images can be applied full-screen.
http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/
The problem I'm having is that I am now getting a horizontal scrollbar showing up when the image is there.
I've already set the image position to absolute so I would have thought this would prevent any scrollbar issues. Is there something I'm doing wrong?
Add this rule to your body
body {
overflow-x: hidden
}
First off, you should not load your background as img. Load it using background-image attribute on some fixed positioned element. This way, when the image is not available, you won't have an ugly browser placeholder saying [image-not-found].
Secondly, whenever you have an element set to width 100% and add a padding to it, it is going to overflow on the x axis. If you don't want that, set the overflow-x to hidden on it's parent, as #abforce suggested.
The best way to add a full background image is to add it as a background to a fixed positioned div which is a direct descendant of the body element.
Here's an example:
<body>
<div class="full-background"></div>
<!-- Here goes your content... -->
</body>
CSS:
.full-background {
position: fixed;
background-image: url('link-to-your-image');
background-size: cover;
top: 0;
width: 100%;
height: 100%;
}
You might want to set the image as a background-image with CSS instead of an IMG element.
#content-wrapper {
background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg');
}
You can set it as background image:
.background-photo{
background: url('url_to_image') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can use the image as background in the body tag width background-size set to cover instead so the image will fit your page
I need your help with a site i'm putting together. I'm a noob and have been given a design that has the body with designed to 900px wide but they have given me an image that is 1200px wide. They want the image to span the full 1200px wide, so essentially there will be 300px overlap on either side of the page. I can't quite figure out how to do this, any help would be appreciated!
Thanks,
Dave
Your best bet to accomplish what they want is to make the image a background-image in CSS.
Set up a div that will contain the image (as a background), and position it on the page relative to where you want it to be.
<div class="background"></div>`
Either fill the div with content to give it a height or define a fixed height, say 400px.
<style>
.background {
height: 400px;
width: 100%;
}
</style>
Now, set the background properties to achieve what you want.
<style>
.background {
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-image: url(URL_TO_IMG);
background-position: center center;
background-size: cover;
}
</style>
JSFiddle example here:
jsfiddle
You can use this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
to cover the exact space you have.
body{
background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
/*Style Your Page Whatever you want...*/
}
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.
I have a background image that re sizes with the window. I want the words on my background image to represent links. My idea was to create divs that were empty and transparent and position them over the words in the background image and when that div was clicked, the corresponding link would be activated.
I am having trouble positioning my divs. I can't seem to get them to stay aligned with their word in the background image when the window is re resized.
HTML:
<div id="wrapper">
<div id="bespoke">
I want this to always be aligned with "Bespoke" in the background image
</div>
</div>
CSS:
html {
background: url(main.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
}
#wrapper {
position: relative;
top: auto;
margin: auto;
text-align: center;
height: auto;
}
#bespoke {
}
Demo:
http://jsfiddle.net/DzC3V/1/
Note: if jQuery is the best way to accomplish this, I don't mind using it.
In my opinion you won't need jquery. CSS and positioning with percentages should do the trick.
Try the following
#yourObeject {
position: absolute;
top: 30%;
left: 30%;
}
it's tricky to position your div properly. but it should work
if this doesn't fit your needs you should really try doing an image Map and resize it with jquery
i think the best way to do this is to use media queries, its a bit of a drag, but it will work
You can set the image in a div
And you can put the empty div on top of it using the z-index:1
So u have better control on both