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)...
Related
I am currently trying to use a subreddit theme and resize an image to be bigger/actual size of uploaded image.
Current code for the Logo is:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 100px;
background: url(%%subredditlogo%%) left center/auto 50px
}
I am trying to scale image to be bigger with keeping aspect ratio.
Like I said this is on Reddit, so I can only interact with the subreddit stylesheet.
I have edited it some and played with it, I have gotten improvements, but not the full image to show.
Here is my current code:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 300px;
background: url(%%subredditlogo%%) left center/auto 300px;
background-size:100% 200%;
background-repeat:no-repeat;
}
It has resized the width but I cant get the height to change. I have tired the:
left center/auto 300px;
but nothing, and also the
height: 100%;
height: auto;
Just looking to get it fixed now.
Try this:
background-image: url(%%subredditlogo%%);
background-position: left center;
background-size:cover;
background-repeat:no-repeat;
I believe you need to break out your "background" css into individual attributes in order for each attribute to work properly.
You could try this:
background: url(logopath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#header .pagename a img{
width:100%;
height:auto;
}
Try this for auto resize img.
I have a background image which I would like to cover the element, using background-size: cover; However, I'd also like to scale it up 110% in both directions, beyond what cover does, so that I can subsequently move it around with background-position.
Put another way, I'd like background-size: cover to treat the surrounding div as if it were 110% larger in both directions.
Is there a way to do this purely in CSS?
If I understand correctly, this would be a way to do it, but max() is not standard CSS3:
background-size: max(auto 110%) max(auto 110%);
I have created a Fiddle for you to check out. I believe I understood the question correctly but please let me know if I am off base.
I wrapped the div that has the background-image in another div like so:
<div class="hero-container">
<div class="row" id="hero"></div>
</div>
and applied the styles like so:
.hero-container {
overflow: hidden;
width: 100%;
height: 100vh;
}
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 110vh;
margin-bottom: 0px;
right: 0;
}
Play around with the fiddle by changing the height: 110vh and let me know if this is what you were looking for, or if I am at least on the right track.
Hope this helps!
EDIT*: I removed the transition and the padding as these are not necessary.
If you would like to do this with a container that has a fixed height you can change the .hero-container height to 500px or something and then just use 110% instead of 110vh in the height for the #hero div.
If I do understood your question correctly, I guess you can try this below:
.box {
width: 40vw;
height: 40vh;
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
background-size: cover;
}
.box:hover {
background-size: 140%;
}
<div class="box"></div>
I am new still a beginner to CSS and I have been having problems with getting my background to fill the age. I know contain and cover won't help me but even things like background-size and the widthand height commands aren't helping.
body {
background-image:url(X.png);
background-repeat:no-repeat;
width:100%;
height:100%;
}
Use html instead of body. cover should work, but it may depend on the browser as to how it act's for instance you may need to use -moz-background-size:cover if the browser is mozilla based.
Try add these style below:
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
It should work, please check my jsfiddle link:
http://jsfiddle.net/chris_poetfarmer/9xa35pwp/
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;
}
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.