I have been struggling for the past several weeks with the parallax effect in a section on the profile page I am building.
In this section, I have three 4-column divs. The 1st div contains my text, the 2nd div contains one large background image, and the 3rd div contains two smaller background images.
I added background-attachment: fixed; to three images, and while it works fine with the large image in the 2nd div, the other two images get stretched beyond recognition. Here is the CSS styling that I have right now: https://codepen.io/snailssnooze123/full/BmPxgN/
#about-bg-selfie {
background-image: url("https://www.dropbox.com/s/aqf4nj496qeg0db/alleyPic.JPG?raw=1");
height: 500px;
width: 300px;
background-repeat: no-repeat;
background-position: center;
background-size: 35%;
background-attachment: fixed;
border-top: 500px solid transparent;
border-left: 90px solid #fff;
margin-left: 60px;
padding-right: 250px;
}
#about-bg-pyramids {
background-image: url("https://www.dropbox.com/s/savr06trk2onj2c/pyramids.jpg?raw=1");
min-height: 250px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#about-bg-temple {
background-image: url("https://www.dropbox.com/s/twatj0fumugvrbg/temple.jpg?raw=1");
height: 240px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 10px;
}
Here is what I would like the picture on the right to look like, only with the Parallax effect:https://codepen.io/snailssnooze123/full/LOBmgB/.
I have been playing with the code for days and can't get it to work. Could anyone help me figure this out? I'm afraid I must be missing something really obvious here :)
I found what is the problem.
you have to remove this from "#about-bg-pyramids" and "#about-bg-temple" css :
background-attachment: fixed;
Related
I am a beginner in html and CSS I was trying to modify my old project by adding a background image and I want the image to take the size of screen while remaining still while I scroll up or down
here is my code
'''
body {
background-image: url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1, h2 {
text-align: center;
}
.catphoto {
text-align : center;
}
'''
You can do this with the background-attachment property in CSS.
Example:
body {
background-image: url(https://picsum.photos/1080/1920);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 300vh;
}
.cover {
background-color: aqua;
height: 50vh;
margin-top: 90vh;
padding: 20px;
}
<div class="cover">
(covering up so you can see the effect)
</div>
This fixes the position of the background to a specific place, like an element with the position of it set to fixed. It can easily be ported to your code by adding a single line in the CSS.
background-attachment: fixed;
More information about background-attachment: MDN web.dev
So I have background-image that when the browser ocuppies the whole screen, it displays properly. While I make the browser window smaller, the image shrinks up to a point, then suddenly it stops. This is what happens:
I only have a .CSS file that has:
.fondo {
width: 100%;
height: auto;
position: absolute;
background-repeat: no-repeat;
background-image: url("src/assets/images/fondo.png");
background-size: cover;
background-position: center center;
}
And the .html file has:
<div class="fondo img-fluid"></div>
I always use this for responsive background images
Selector{
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
But sometimes i also face this issue
Then i use #media and define size manually at breakpoints or make background with which is not possible in your case
All the best
What you need is height in vh and width in vw:
fiddle to playaround.
.fondo {
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-image: url("http://placekitten.com/301/301");
background-size: cover;
background-position: center center;
}
<div class="fondo img-fluid"></div>
I think it should be background-position: center;
I have a #div element with the following CSS styles:
width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
And the result is the following:
As you can see in the left and bottom part of the element there are two blue lines (the color corresponds to the code #53A7E7).
If I delete the style background-size: cover; both lines disappear and the image covers the entire surface of the element.
Any idea how to fix this?
The original image has the dimensions 1779x683 pixels, but I want it to be fixed for any image size.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
Don't use background-color and background-size: cover at the same time because the image will be on top of the color. If you need a color around your background-size that is cover, just add border. The background-size: cover is working corectly. In your example I suppose you need display: inline-block.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
border: 10px solid #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..
However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.
So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?
Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/
(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)
My current code looks like:
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
#include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.
css:
..header{
border-top-left-radius:5px;
border-top-right-radius: 5px;
max-width: 600px;
width:100%;
height: auto;
min-height: 200px;
background: url("img/bg-abstract.jpg") no-repeat fixed;
background-position: left top;
background-size: 100%;
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
}
What you need is
background-size:cover
background-size: cover Also try using % instead of px.