I want the background image for my home div only which is visible only for desktops and tablets(landscape). I could adjust them with CSS media query.
But my background image is not fitting to full height.
here is my pluner code. http://plnkr.co/edit/HzlZdqvprkhzO1edqNKK?p=preview
my jquery code
$(document).ready(function(){
console.log($('.home').height());
});
is also returning null.
What is the best way to solve this.
addi this code to youre image, and you wil l have your result without jquery:
background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed;
background-size: cover;
height: 400px;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
the secret is using background-size: cover and then set the background as fixed with height and width 100%
console.log($('.home').height()); is returning null as you have not set height attribute for home div.
set height attribute and then you can use it or do Nick told background-size: auto 100%;
use background-size property of css
background-size: 100% 100%;
http://jsfiddle.net/fynbc5uv/
You said you didn't want to set height, the only workaround for this is setting the background-image on the body.
CSS:
body{height:100%;
background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
!my present design**i have designed a website like this.
**
it is working fine for my screen resolution. the bottom div is half way up on the background image and half way down from the background image. my problem is when i test this for higher resolution screen it is not looking the same. the image is moving down. this is my css
body
{
background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 75%;
font-family: Arial;
}
the bottom div css
.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}
how to set this same for all screen sizes.
You say the image is moving down, do you mean when you scroll the image moves but you want it static? If so you could add background-attachment:fixed; to the body's CSS.
That's because the proportion of the image doesn't let the image fit the whole screen.
set the
body {
...
width : 100%;
height : 100%;
}
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.
see I don't want this to scroll
http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window
you can use background-attachment: fixed; property to fix the background image.
html {
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%;
height:1020px;
left:20px;
top:20px;
}
Here is a Demo.
The background-attachment property is what controls if the background image scrolls or stays.
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.
OK, first your code is a mess. I recommend running your code through the w3 validator first.
You have two options to do what you want, either using the background fixed & cover that you already have answers for:
html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or using overflow on the div with the content.
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo
So I have a wrapper div with a background image that covers the whole page.
This works generally... I can maximize the browser and the background covers completely, BUT if there is a scroll, the image stops at the point of scroll.
This image shows the scrolling and the gap from the jsFiddle example/1 :
#wrapper
{
background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100%;
}
and the inner div
#inner
{
margin: 0 auto;
height: 100%;
width: 980px;
}
Any advice would be helpful.
thanks
I have recently done something that might do what you're looking to do-
Anything's worth a shot, right?
background: #000 url(**snip**) no-repeat 50% 0 fixed !important;
Try adding the !important to the end of your css, it "over-rides" any other styling from other classes, ect. You never know, it might work - but it might also break something else.
What !important does can be found here.
The problem seems to be the fixed width on .inner
.inner{
//...
width:980px;//this appears to be breaking the css3 background-size
}
A possible solution is to apply min-width on the .wrapper
#wrapper {
background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100%;
min-width:980px;
}
This however means that your cute cat will be enormous on tiny screens (but as you have applied fixed width on .inner this might not matter)
see fiddle
Although it wasn't the route I wanted to take... by setting the image and all of its parameters in body rather than a div, I can get the behavior I am looking for.
I don't know why that is exactly... somehow body is treated different than a div (though I do have a reset script, so I would not expect that to be the case)...
Trying to get full size background image with:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
It's showing the background image with correct width but height gets stretched.
I tried various options like
html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
removing height: 100%
but none of them worked.
Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%
try with contain instead of cover and then center it:
background-size: contain;
background-position: center;
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;
A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.
I have same problem I use this CSS on body
background: url(image.jpg);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
I would try something like:
body {
background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
margin: 0 auto;
}
You should not have to specify the dimensions for the image.