If you look at this page, you notice that the background image does not move
http://livingsocial.com/deals/31570-86-off-boot-camp-classes?msdc_id=13
1) How is this done?
2) Why doesn't Twitter do something similar (ie, what are the UI disadvantages?)
CSS:
background-attachment: fixed;
My my.
It's done with pure CSS:
body
{
background-image: url('foo.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
You can use:
body {
background: #fff url(path/to/image.png) 0 0 no-repeat;
background-attachment: fixed;
}
As to 'why doesn't Twitter do this?' That's not something we can answer, really, unless the Twitter devs are present on Stack Overflow. Historically using it has meant the page tends to scroll somewhat 'clunkily,' but that might just be the added rendering requirements placed on the browser, rather than implicit in the behaviour, or use, of background-attachment.
1) There is a large div there with the background, and position: fixed.
position: fixed means it won't move when the viewport scrolls.
2) I don't know... they probably would if they wanted the functionality.
One line is all you need
background:transparent url(img.jpg) no-repeat fixed 0 0;
Check working example at http://jsfiddle.net/dFJCt/
Related
I've set a fixed background on my website but it's not quite staying fixed when zooming in and out.
This is the site I want to replicate the background from:
http://triangl.com/
Zooming in and out keeps the background completely fixed.
Please see mine:
http://zoeyplayground-com.zoeysite.com/
Zooming in and out will behave differently.
My code is below. This will only set the background on the home page:
jQuery(document).ready(function(){
if (top.location.pathname === '/')
{
jQuery("body").addClass("bodybackground");
}
});
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
}
Could anybody inform me on what could be causing this? Thank you very much for any help.
you need to add background-size: cover;
.bodybackground {
background: url('/media/import/background.jpg') no-repeat center center fixed;
background-size: cover;
}
Use background-size: cover; or background-size: contain; as per your necessity. That should fix it.
I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.
I got a paragraph and i wish to have a visible "marker" to show the start and end of the paragraph to the user.
I got no problem to show the backgroundimage on the upper left, but i do not know how to position the background-image to the lower right end. Here my css for positioning the image to the upper left:
p[class] {
background-image: url("../../image/my_image.gif");
background-position: left top;
background-repeat: no-repeat;
}
I am not looking for a solution using additional html elements!!! It needs to work using css only! Due to the fact that the paragraph has set pseude-before and pseudo after elements i am not able to use them here. So the question is:
How can i position a background image to the top left and bottom right of a html element without using additional html elements but css only (and no pseudo elements)?
Cyrille is near but wrong. it needs to be background-position: right bottom;
in general - its posible to use numeric values.
So for background-position: right bottom; you can also write background-position: 100% 100%; and background-position: left top; would result in background-position: 0 0;
also take a look at the W3C specs on this: http://www.w3.org/TR/css3-background/#the-background-position
to sree's comment of above: this is completely wrong, left: 0px ; top:0px; does refer on positioning of the HTML element itself when using position:relative or position:absolute
edit:
if you like to use multiple backgrounds you can note it als follows:
p[class] {
background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
background-position: left top, right bottom;
background-repeat: no-repeat;
}
look at http://caniuse.com/#feat=multibackgrounds for cross browser support
greets
tom
If browser support is not a problem for you, you could do with CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/
What about trying background-position: bottom right instead of left top ?
I have a div that I want to have the following characteristics:
Width = 50% of its parent element
Height equal to whatever it needs to be in order to maintain a certain aspect ratio.
I need to use percentages because the object will resize left-right when the browser is resized. I want the object to be resized top-bottom to ensure the object maintains the same aspect ratio.
I don't think there's any way to use pure CSS to do this, but does anyone know of a way? Alternatively, is there an easy JavaScript way to do this? (JQuery is fine.)
I figured out how to do this without js, though you need to use a transparent image.
Set up a html structure like:
<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
<div class="rect">Your favorite content here</div>
</div>
Use a AxB transparent png for rect_image where AxB is the aspect ratio.
Meanwhile set up a stylesheet like:
.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}
The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.
Here's a pure CSS version with no img tag:
<div class="apple_container"><div class="apple_icon"></div></div>
SCSS (include Compass to render the background-size):
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
#include background-size(contain);
background-position: center center;
}
CSS generated from the above:
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center center;
}
Results in a square element with a background image centered and fitted within it. This is good for responsive elements that you want to resize dependent on the user's device.
jQuery sounds pretty easy. Set the 50% width in the CSS, and then the following:
function onResize() {
var el = $('#element');
el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);
Here you go: Detecting a browser resize using JQuery.