I am testing out the parallax scrolling effect, in which there is a background picture and by scrolling, you can see different parts of the picture. The problem is, when I zoom out the page, the picture repeats, which is ugly. I have tried no-repeat; and it only makes the picture stay in one corner, and I have tried background-size: cover; which makes the page scrollable to sides which I don't need.
How to deal with this?
EDIT: I'm sorry for forgetting to post the code.
HTML & CSS:
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
<section class="parallax">
<div class="parallax-inner">
<h2>My First Heading</h2>
</div>
</section>
Example: http://prntscr.com/9jv8d4
Zoomed out: http://prntscr.com/9jv8sd
No-repeat; http://prntscr.com/9jv94p
Cover and on 1920x1080 screen, default 100% zoom; http://prntscr.com/9jv9ur (page is scrollable to the far right side)
try to change your css code to be as following:
body {
margin: 0;
}
.parallax {
background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
i tested it on my own and works fine, hope this will help you.
resource will be useful for you:
https://css-tricks.com/perfect-full-page-background-image/
just use
body{
margin: 0;
padding:0;
}
Related
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
.jumbotron{
width:100%;
height:50vh;
background: url('longboard.jpeg');
color:white;
}
I'm trying to build a "jumbotron" from scratch. Currently the html for it is just a with nothing in it. As of right now the picture simply cuts off on the right side while my navbar scales downward. i would like the background picture to also shrink with it. How do I go about doing this?
Also whenever I add a or anythign to the div a margin appears above my navbar which I didn't thing was connected. Sorry in advance if i broke any posting etiquette, this is my first post on here.
Maybe try this:
.jumbotron {
background: url('longboard.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 50vh;
width: 100%;
overflow: hidden;
color: white;
}
Resource - https://css-tricks.com/perfect-full-page-background-image/
The simplest way is to set the background size to "cover"
.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}
I am building a simple landing page where the visitor would see a banner, a background image below it and a couple of buttons located vertically beneath each other.
The problem I am experiencing is that, at the moment, both the banner and the background image are starting from the same position (the top left corner of the web page), thus part of the background is hidden by the banner.
The code I currently have is:
<style>
body {
background: url("http://url.to/background") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
}
#Wrap {
position: absolute;
}
</style>
<body>
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
</body>
The expected result is to have the banner image take the beginning of the page while fitting into the screen without causing any extra scroll to appear. What is more important is to have the background start after the banner.
A fiddle could be found at the following URL:
https://jsfiddle.net/morL1zka/
Any help or ideas would be appreciated.
you should use background-position-y for this, and you need to set value which is equal to the height of the banner
body {
background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
background-position-y: 100px;/*the value must be the same height as the banner */
}
#Wrap {
position: absolute;
}
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
You can easyli solve this using JavaScript. The Backgroundposition will be automatically set under the banner, without knowing the height of it.
var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');
body.style.backgroundPositionY = banner.offsetHeight + 'px';
body {
background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
#Wrap {
background-color: #345370;
text-align:center;
}
<body id="body-margin">
<div id="Wrap">
<img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
</div>
</body>
Here is also your updated fiddle: https://jsfiddle.net/morL1zka/2/
My background image is fluid only to a certain point. When resizing the browser it starts to shrink
background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;
You can see what I'm talking about here
The height: 400vh is your problem I believe if you can put this code on the html element as such
html {
background: url("http://...") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and delete the class "me" from your code this should be fluid for you. The problem is you are setting the background on "me" which doesn't contain any content and its height is only being set by you as "400vh" so once it hits that height it stops being fluid so by setting it on the html it will wrap the whole page and be fluid
Edit
if you desire to have your image not clipped in anyway and show 100% of it on every screen you can do something like this
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px;
}
turn the me class into an image instead of a div
<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>
and the css like this
.me {
width: 100%;
}
this will give you a wrap that will cover 100% of the persons screen size and will allow you to set the image to be in the background and will not clip the image as you resize. If you are trying to make this website responsive I wouldn't suggest using absolute references in your css as this may lead to some items out of place on different screen sizes. You may want to check out www.getbootstrap.com since they provide an excellent library for a responsive grid.
click_hear_demo
css
#wrap{
display:block;
width: 100%
}
body {
margin: 0 0;
position: relative;
}
.me {
background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}
}
html
<body>
<div id="wrap">
<div class="me"></div>
</div> <!-- end of #wrap -->
</body>
I'm trying to create a responsive, FIXED background that works on all major browsers.
Basically I'm after the typical background:cover behavior (scales with browser size) BUT, want the background to be fixed to create a parallax effect.
Is this even possible if so, how?
The CSS so far WITHOUT Fixed:
#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}
The Body HTML:
<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>
As you can see, when you resize this, the background resizes slightly. However if I add
background-attached:fixed;
The background no longer resizes, only behaves like a fixed background should.
Try this:
keep the
background-attached:fixed;
and instead of background-size: cover, try :
background-size: contain;
Also for future reference, try and add your code to : http://jsfiddle.net
it's best when you simulate the problem for everyone to see and help.