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 */
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 have a layout issue I can't seem to figure out. It involves a background image in a div that is 100% width of a viewport. The background-image is 1000px wide, but I want it to always stretch to fill the width of the div mentioned above, whether the viewport is 200px wide or 600px wide or 1000px wide or 1600px wide. Another requirement is that the graphic should keep its aspect ratio unless it's less than 50px tall, at which time the graphic should remain at a minimum height of 50px and kept centered horizontally within the div. Which means that the narrower the viewport gets, the less and less you can see of the graphic itself -- until you can see only the center of it.
I'm using background-size: cover, which works beautifully for when the viewport is >= 500px (i.e., the background-graphic is at the minimum height of 50px). However, I don't know how to keep the graphic centered as a background-image at widths below 500px.
Is there a CSS rule that can handle this? Or do I need to use a media query and/or javascript to make this happen?
Rather than background-size: cover; try background-size: 100% auto; to base it off the width of it's container and not the height. It still follow it's aspect ration but doesn't worry about the height anymore.
Hello your question is not very clear. But you could use this to have a Background stretched and covered.You can set a fixed and centered background on it, then adjust it's size using background-size.
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;
}
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.
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)