I’m currently building a single page scrolling website.
On the second page I'm using a background with the background-size:cover attribute. Basically I want an element to sit on top of the background but move in correspondence with the background on resize, even if that means the element moves out of the viewport.
Is this possible?
What I've tried so far:
.background {
width:100%;
height:100vh;
margin:0;
background-image: url('Studio.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 80% 0%;
overflow: hidden;
position: relative;
z-index: 1;
}
#image {
height: 100%;
width:100%;
background-image: url('lamp.png');
background-repeat: no-repeat;
background-size: auto;
position: absolute;
}
I've mocked up a diagram to better explain what I'm trying to achieve:
The first diagram shows how the layout looks in a full size viewport.
The second diagram shows how I want the layout to look when the viewport is resized... so the image element moves in relation to the background, out of the view port.
Link to first diagram
Link to second diagram
Sounds like parallax scrolling or position:fixed on your element.
Related
I have a react app with router. I also have a navbar.
I want my main page to have a background image that fills the entire page:
html, body {
height: 100%;
}
.Main .bg {
width: 100%;
height: 100%;
background-image: url("../resources/top-bg6.jpeg");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
However, this causes the image to be cropped at height 56px.
I think the cause is all the encapsulating divs that are caused by the different components and the router.
If I try
.Main .bg {
...
height: 100vh;
...
}
A scroll bar appears. I do I deal with it?
Edit: Added a screenshot:
It's all is great but a little bit you have change in your code.
Apply 100vh height on your .Main div only and change .bg background-position = center.
Now your image come at centre of your background .it's depend on your image size.
I have website where there is a header background-image that is styled with the following CSS:
.header {
position: relative;
min-height: 436px;
background: url("../img/holland-canal.jpg") no-repeat;
background-size: cover;
}
As it is now, when resizing the window on lower resolutions, the image is aligned to the left and thus the right part of the picture gets cut off. The right side of the picture contains the bridge, which I want to be visible at all times.
Is it possible to position the background-image in such a way that it is always aligned to the right, i.e. that the left part of the image is cut off when resizing to a smaller window?
Add this to your CSS:
.header{
background-position:right;
}
as the div that have the header class is containing the background image
Output
Fore more info, check this
Add background-position
.header {
position: relative;
min-height: 436px;
background: url("../img/holland-canal.jpg") no-repeat;
background-size: cover;
background-position: right;
}
The Fiddle isnt rendering the exact grid properly but it gives you an idea of what I'm going for. Each div has a fixed background image. The problem is each background image is defaulting to the top left corner, even after trying to reposition the image using background-position.
https://jsfiddle.net/hLu7gvo3/
The styling looks like this
#thumb1{
background-size: cover;
background-position: center;
background: url("../img/gal1.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.gallerythumb {
color: white;
position: static;
float: left;
width: 33.333vw;
height: 100vh;
}
and the html as you'd imagine
<div class="gallerythumb" id="thumb2">1</div>
I tried setting the sizing property as container but that didn't do much. Anyone have any clue how to center the background image within the div?
Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org
Here is how I'm trying to do it:
http://jsfiddle.net/Jp5AQ/1144/
div img {
max-width: 100%;
min-height: 100%;
height: auto;
outline: solid 1px red;
}
But it doesn't work correctly. The image is disturbed by resizing the window.
If you want to do this with pure CSS you can use the CSS3 background-size property:
div {
width: 100%;
height: 100%;
background: url(your-image.jpg) no-repeat center center;
background-size: cover;
}
Here is a fiddle demonstration:
http://jsfiddle.net/Jp5AQ/1149/
This is the same technique used on the Ghost site you gave as a reference.
Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.
You are using <img /> tag.
Call the image through CSS and use background-size: cover;.
Here is the DEMO
Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.
You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.
Its hard to do that with an img tag.
it will work a lot better with:
background-size: cover;
background-position: center;
here is a Fiddle of it
just remove the image inserted with an image tag and instead put the image in a div as background.
div: should get height and width of window screen size (most likely with javascript)
insert image with the css style:
div{
background: url(path_to_img/img.jpeg) center center no-repeat;
background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers
}
here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp
and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp
try this css:
.banner-bg {
background-image: url(../images/header-bannerbg.png);
background-position: fixed;
background-repeat: no-repeat;
height: 580px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
http://jsfiddle.net/aashi/Jp5AQ/1146/
Firefox has a curious bug relating to background-attachment and background-size. I call it a bug, I suspect it isn't, but this renders the way I think it should in the other major browsers (emphasis on I think). The desired effect is to size a vertically repeating background to 100% width while maintaining image proportion.
Here's my original CSS, in this version, the background won't render at all for firefox (even with firefox specific background tags).
body {
background: #000 url('../background.jpg') left top repeat-y;
background-attachment: scroll;
background-size: 100% auto;
}
Changing background-attachment: scroll; to background-attachment: fixed; causes the background to render, but the "floating background" behavior is not desired.
[UPDATE]
Removing background position causes the image to render correctly again.
e.g.
body {
background: #000 url('../background.jpg') repeat-y;
background-size: 100% auto;
}
This is actually a problematic fix because my position values were actually 'left 113px'. I can fix this by applying the background to a wrapping div below the site header instead of the body element, but the fact remains that Firefox has trouble rendering background images with background-size: 100% auto; when position values are used and attachment is scroll.
[UPDATE 2]
I realize the bug only shows up when an additional piece of CSS is present. That's not to say the additional piece of CSS was at fault (it isn't), it's to say that this Firefox specific rendering bug is somehow caused by it.
The additional CSS (used for creating layouts with flexible 100% height)
html { width: 100%; height: 100%; position: absolute; }
And the complete body CSS to go with to replicate the bug
body {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: #000 url('image.jpg') top left repeat-y;
background-size: 100% auto;
}
[SOLUTION]
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well.
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well. (see UPDATE 2 in my original question)