This has baffled me completely,i have tried multiple times todo this but i simple cant.I am sure the solution is simple and its something i have looked over.
All help appreciated.
http://techgnotic.deviantart.com/journal/Earth-Day-The-Inspiration-of-the-Natural-World-297767607?utm_source=elnino&utm_medium=messagecenter&utm_campaign=042212_MKT_EarthDay&utm_term=button
Set background-attachment: fixed on successive divs:
div {
background-attachment: fixed;
background-position: 50% 60%;
height: 500px;
width: 100%;
}
jsFiddle
You can skip the fixed height declaration if your content will determine the height of the div. I've included a container div to display the effect in the confines of jsFiddle; in practice the body will work just fine.
Related
Recently im finally making my webgame responsive and im struggling with it.
I researched that in order to my divs to be a proper size on every device I need to set position: relative on parent element, position: absolute on the divs I want to be responsive, and that part I get.
However, I need my divs to be related to the background image, because the parts of the backgrounds are clickable via divs. Can anyone guide me how to do this? Recently Ive got it looking like that:
I believe I could achieve what I want with setting proper properties on the background image which I currently have set as:
#corridor {
/*position: relative;*/
height: 100vh;
width: 85%;
float:right;
background: url("corridor.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Hopefully the title explains it pretty good (took some thinking i assure you), anyway i have a bg image attached to body by css:
body,html {
height: 100%;
}
body {
background: url("../images/header_lg.jpg") no-repeat;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
.fullwidth-head {
position: relative;
width: 100%;
height: 100%;
}
.fullwidth-head-inner {
position: absolute;
top: 17%;
left: 11%;
width: 78%;
height: 30%;
background: #c5c5c5; /* just for visibility */
}
Two divs are applied ".fullwidth-head" which is the container and is relative and at the very top of the page by default as it is the first div, inside fullwidth-head is another absolute positioned div ".full-width-head-inner", now it works pretty good on desktop and does what i want it to do, but sure as i switch to portrait view it goes to pot due to really having no relation to the background image being resized, i did think of a small hack by adding an empty .png the same size as the body background image to keep the ratio and it would probably work, however im a bit reluctant to do this because of the extra load it would apply.
Html is below (not much thankfully) i have been at this for sometime and keep starting over until i get the required result that i am after:
<body>
<div class="fullwidth-head">
<div class="fullwidth-head-inner">
</div><!-- /.fullwidth-head-inner -->
</div><!-- /.fullwidth-head -->
<!-- js scripts in footer -->
So is there a way other than using a blank.png to fix the size of the relative container div where i can actually via css get the info i need to keep the same aspect ratio as the body bg image?
thanks
I think you might simply be looking for what's known as the padding-bottom hack.
You need to know the image proportions resp. aspect ratio beforehand; but then it's an easy way to get an element to "resize" the same way as a real image would.
A few additional resources on that subject matter:
http://www.smashcompany.com/technology/the-bottom-padding-hack
http://andyshora.com/css-image-container-padding-hack.html
https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack
I am working on a rails project. I have gotten all of the rails aspect down without much of an issue. However, I ran into an issue with CSS-something that I normally do not encounter. Usually run into ruby problems!
Basically, I have a background image set on a page. At the top of that page, I have a div element. When I go to move the div element further down the page, the background image stays with it. It is almost as if the two are connected. Here is the code that I have:
HTML:
<div class="about_background">
<div class="container heading_block">
<h1 class="about_heading"><i class="fa fa-flask"></i> About Abby <i
class="fa fa-cutlery"></i></h1>
</div>
</div>
CSS:
.about_background {
background-image: url("bread.jpeg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}
.heading_block {
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}
.about_heading {
text-align: center;
font-size: 50px;
}
Please let me know what else is need. I tried setting something up on jsfiddle but was not getting what I needed. If you need to see the code, on github, it is under ravenusmc, food_blog. Thank you for the help!
I'm not sure how you are trying to move the div but this is what I usually use to move elements.
.heading_block {
position: relative;
top: 10px; //or however far you want to move it.
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}
If I'm getting your point then just add...
min-height: 100%; to about_background class.
I'm not entirely sure I understand the problem you're having.
which of the divs are you moving? if it's the first (outer) then the background will move with it as it is attached to that container the background-attachment isn't going to change that, in fact if you re-size the window with this you'll see what it's actually doing is locking the position of the background to your screen and re-sizing the window will make it scroll inside of the container.
Moving the 2nd div (the inner) leaves the background in place in my test.
Perhaps attaching the background to the body instead if you must have it stay in place.
I have what is probably a simple question but I can't find the answer for it. I have a background image that looks fine and tiles fine and scrolls fine. However, I have a second background image that is layered on top of it that is put inside a wrapper div ("whiteBackground" I believe it's called) and I do not want that one to scroll with the page. As the content and text gets longer and forces the user to scroll I'd like for the second background to stay static. That way while the user scrolls down the page it would just make it seem AS IF the second background was just perfectly still.
I've tried to do a fixed background attachment in my "wrapper" div but it's a no go.
Any ideas?
http://jsfiddle.net/SMc9R/
`#wrapper {
position: relative;
width:960px;
min-height:768px;
margin: 0 auto;
background-image:url('images/white_background.png');
background-attachment: fixed;
font-family:'MuroRegular';
}`
This is the main part I believe the problem is at.
There are no images but I figured that my markup and CSS should be enough. Any help would be appreciated. Thank you so much!
Demo :http://jsfiddle.net/SMc9R/1/ DO YOU want like this.. or specify any correction regarding this correction...
#banner {
position: absolute;
float:left;
width: 960px;
height:60px;
text-align: center;
font-family:'AmaticBold';
font-size: 50px;
background-image:url('images/banner.png');
background-repeat: no-repeat;
z-index: 4;
}
The site i'm editing is www.bedriftsdesign.no.
I've got a shadow image element (shadow.png) wrapped arround the body.
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
I'd like to make the shadow stay fixed while the content scrolls through it inside so it looks like it scrolls over a bump. I tried to add position: fixed like this
#wrapper {
background: url('shadow.png') no-repeat;
width: 1282px;
margin: auto;
position: fixed;
But this only made the whole page stick and let nothing scroll. I just can't understand how I should progress to make this work.
Any help to fix that problem would be really appreciated?
You could set the body bg img like so and let the rest of the site scroll:
body {
background: url('shadow.png') no-repeat;
background-attachment: fixed;
}
I've done this to this site (if is that you want): www.kapantzakis-snails.gr