let me think, how can i explain my problem. i have a scrolling page with lots of div layers... one below the other! they background images have resolution of 1920x1080 px! but they should fill the complete background browser window. eg when im scaling the browser window the picture should scale itself.
ive seen a few jquery plugins who do a very good job but its important for me that the backgroundimage is defined in the css, because im using the inview.js and try to create the parallax effect.
is this possible?
thanks ted
You can use background-size: cover for this although it is a CSS3 property and some browsers will not support it.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Edit: A prefixed and fallback solution courtesy of CSS Tricks
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this...
html, body{
padding:0px;
margin:0px;
}
Then, to make your image work for super-large displays (ie: multi-screen, etc...), scale it from an <img> and set a low z-index.
.background{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:0;
}
<img src="background.jpg" class="background">
Change background.jpg to your background image & put <img> tag at the bottom of the page so it loads last. You may have to play with the z-index if it doesn't display at the right level (ie: covers other elements up)
Related
I put this code in my demo .html file
body{
background-image: url('https://i0.wp.com/www.socialnews.xyz/wp-content/uploads/2020/10/26/5573c6f0bee7ca021f4a8aecbaf6cbeb.jpg?quality=80&zoom=1&ssl=1');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-size:cover;
background-position:relative;
}
This image fills the entire Browser window in my desktop but I get some white space below this image when I try to run this code in my Google chrome in my cell phone. I need help regarding this matter
Add:
min-height: 100vh;
And background-position: center;
to your css.
Also you can use CSS Media queries to control behaviors on multiple screen sizes.
its all about
height:100%;
width:100%;
if the image is contained in something, make sure that has height and width set to 100% too.
then you set your html tag's style to have margin:0, and ur picture should cover the entire screen:
html, body {
margin: 0;
}
I'm really new into html/css/javascript and I need some help with a site I'm trying to design.
My URL is this one: http://www.wideconcept.com/test2/test.html
It's a full-page background site, with the background image being responsive. The problem is when the user clicks on the "photos" link, and then on '1': the image that gets displayed on the screen as the new background is not positioned as the original background image, and also the height of page increases (the user can now scroll down).
How can I change the html/css code so that, when the user clicks on the 1st image, to display it in the same way as the background image?
Thanks!
EDIT - To be more specific: My main problem is that when I click the 1st photo link, the image is not displayed in the same position and dimensions as the original background image, even though the css properties for that are the same as the original background css properties.
I just realized your design was having some scroll position for the background image( which seems fine in firefox but not in chrome )
To fix the problem:
img { //line no. 375
display: block;
height: 1px;/*this fixes your bug*/
}
Another problem I found is that your div with id background, so add the following rule inside #background:
#background {
z-index: 1; /* to fix the layer bug*/
}
I think that you can define the main background in that way:
body{
overflow: hidden;
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(assets/bg100.jpg) no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
#Add the browser prefixed CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
#And
background-size: cover;
}
And then when the user clicks the photos buttons change the background image url through jQuery/javascript.
For example, using jQuery this should be similar to this:
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
Hope it helps.
Just like Halbano said, the problem are the <div id="background"> and the <div id="background-image">
You can fix it by doeing the following:
<div id="background background-image"></div>
Do this at the Background div.
Al of the sudden the image will drop a bit but that is simply fixed with css. Also a Menu with a button will pop-up. Apperantly the manu was there already but i could not see it in Chrome.
Good luck
When viewing this website: http://myankle.co.uk/faq/
Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with the page.
This is achieved by setting a background as background-attachment: fixed. The effect is a basic implementation of parallax.
A good article to get you started is http://davidwalsh.name/parallax
An example class to apply this would be:
.parallax {
background-image: url('http://demoimage.com/image.jpg');
background-color: none !important;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
overflow-y: hidden;
}
You add a background-image to body that is position: fixed; and then make html content on top of it transparent, so you can see the background-image. It's not moving with the page, that is an illusion.
That element uses a background-attachment CSS property to fix the image relative to the screen:
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
elem {
background-attachment: fixed;
}
JSFiddle demo.
I would like to know how to make an image rescale accordingly with the size of the browser window, similar to how these guys have their background video on the main page. I have something similar working for a video, but applying the same code on the image just won't work.
Having both the width and height of the image on 100% is not acceptable, since that will put the image out of proportions.
All help greatly appreciated!
Please note that it is downright impossible for me to add a jsfiddle here, because in that case I would have to put my entire project in jsfiddle.
No JavaScript required.
You can do this using the various background CSS properties, namely background-size:cover; and background-position:center center; on an element with 100% dimensions, which will fill the browser if these are also defined for html and body and the element is a direct child.
Demo Fiddle
html, body, #img{
height:100%;
width:100%;
margin:0;
padding:0;
}
#img{
background-image:url(myImage.png);
background-size:cover;
background-position:center center;
}
if it's a background image (like in the example link), you can use:
background-size: cover;
Else if the img is in the HTML, you can give it a width of 100% indeed, but set the height to auto so it scales normally.
width: 100%;
height: auto
I am using javascript to resize a div as the browser resizes, and to set it initially when the page loads. (Yes, I know it needs to degrade gracefully.) The reason I can't do it all via CSS is because there is a fixed nav bar with a constant height at the top of the screen that needs to be taken into account. I want to resize the div (and its gradient background) to fit the browser window, but when I change the CSS height property it just cuts the image off instead of resizing it, which means the next section of the page will not transition properly. Is there an easy fix to this?
Here's the CSS I'm using right now:
#homepage_aboutstrip {
background-image:url('home/images/gradient-about-background.png');
background-repeat:repeat-x;
position:absolute;
margin-top:0px;
width:100%;
height:1050px;
z-index:1;
}
And using IMG tags rather than background-images would work obviously, but it isn't an option here.
You can do it with single line css. try this if it works
background-image:url('home/images/gradient-about-background.png');
background-size: cover
Quality of image may be disturbed if it expands too much
It works for me on IE7 as well.
background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */