I have this whole section here:
<section id="design-centre">
<section id="design-centre-cover">
<div class="container">
<div class="row">
<div class="cover-left">
<h1>Our Designs Make Luxury More Affordable</h1>
</div>
</div>
</div>
</section>
</section>
And here is the CSS:
section#design-centre {
position: relative;
}
background: url(../images/design-center-cover.jpg) center top no-repeat;
height: 800px;
background-attachment: fixed;
}
What I am trying to do is the following:
Have the image scroll when I the user scrolls, here is an example on what I am looking for:
http://www.hush.ca/hush-design-main/#hush-design
I tried using background-attachment: fixed; but that didn't work at all
At the moment, it doesn't seem to be possible without JavaScript. Try some tutorials for example code. The main premise is using either the vanilla JavaScript window.onscroll or the jQuery $(window).scroll() event handlers to detect scrolling of the main page, and reposition the background accordingly.
Also, next time you might want to search SO first for duplicate/similar questions before asking your own question.
Related
I'm probably being idiotic here. I've been trying to get a jpeg image to load in the background of a section element as part of a bootstrap course I'm doing (pretty new to this web dev stuff). The image is loading fine in the firefox inspector - it shows no errors and displays the image if I hover over the link - but it just isn't displaying on the page.
Here's the relevant code:
<secton id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 sm-offset-1"></div>
<h1>Generic website title</h1>
</div>
</div>
</secton>
css:
#cover{
background: url("Assets/Photos/Blanket.jpg") center center no-repeat;
background-size: cover;
text-align: center;
height: 100%;
}
The path and name of the image is definitely correct, so it's not that.
Any ideas?
Fixed it! As expected, immediately after posting.
Apparently setting the height to 100% was the issue. Changing it to 100vmin made all the difference.
Baby steps...
I try to place in div class= "container-fluid" extra class where I try place background with position fixed...and this is not working.
Only way to place background-image is directly to HTML. Why?
Another problem is position: fixed;. I use this bootstrap ready to use code like you see in the code below and it is not working, even if I create in css and put new class still nothing, what is about?
For example:
<div class="container-fluid position-fixed" style="background-image:
url(img/ico/wedding_videography.png); background-size:
cover;">
<div class="row">
i just tried to use the same code and it's working but i did it in a different way, here's my code, i hope it helps. https://jsfiddle.net/72reuhaf/1/ and try to add in your code ".." like that:
background-image: url(../img/ico/wedding_videography.png);
<div class="container-fluid position-fixed">
<img class="ferrari" src="https://auto.ferrari.com/ja_JP/wp-
content/uploads/sites/10/2015/02/news-ferrari-580x362.jpg" alt="ferrari">
</div>
body{
height: 3000px;
}
.ferrari{
background-size: cover;
}
I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS:
<section id="process">
<div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
<!--end container-->
<div id="processbg"></div>
<div class="container">
<h2 class="text-center">materials and construction</h2>
<p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
<p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
</div>
<!--end container-->
<img src="img/bigski.jpg" class="center-block bigski">
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
<!--end container-->
</section>
<!--end process-->
And:
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: 100%;
}
Everything looks good on desktops and tablets, but when viewed on mobile, the image gets really small and leaves big gaps around it. This makes sense, because the height of the empty div is always 602 px and the photo scales down when the viewport gets smaller. Is there a way to make the image non-responsive or is there some other solution to this?
Here's a link to the actual web page as well: http://skiest.ragne.me/. You can click the PROCESS link in the navigation and it takes you to the mentioned photo.
Thank you for your help.
I think you are looking for background-size: cover; which will:
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
source w3schools.com
Change your CSS to the following and see if that works for you.
#processbg {
background: url(../img/process.jpg) no-repeat center 110% fixed;
height: 602px;
background-size: cover;
}
Alternatively you could just remove the background-size declaration and see if that gives you the desired result. The default is auto which should leave the image at its normal size.
would appreciate any insight to my issue. I'm trying to use the same image for placeholder purposes and I need it three times but when I link it via css it only appears twice correctly and I have no idea why it won't appear the third time.
Here is the HTML snip:
<div class="container">
<div class="row">
<div class="span4">
<h5>Get in Touch?</h5>
<h3>Add Me</h3>
</div>
<div class="span4">
<h5>Hire for a Project?</h5>
<h3>E-Mail Me</h3>
</div>
<div class="span4">
<h5>Need Information?</h5>
<h3>Skype Me</h3>
</div>
</div>
</div>
And here is the CSS snip:
a.footer_facebook {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
a.footer_mail {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
a.footer_skype {
background: url(../img/icon_email.png) no-repeat scroll center bottom transparent;
}
As you can see. The same image is being used. It works and appears just fine for the mail and skype part but doesn't appear for the facebook part and I have no idea why. If I change the HTML code class from 'footer_facebook' to 'footer_mail/skype' the icon appears. The code appears in order to me and I validated my html with no errors. Thanks.
Never mind guys. I just deleted those bits and retyped it out and somehow it worked. Thanks anyways!
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height