i was looking forward to some designs as done here.
how is it possible for the background to remain static and the content to move over it??
background-attachment: fixed
You can find this sort of stuff out easily by using a tool that lets you examine the CSS applied via the browser, such as Firebug for Firefox or Web Inspector for WebKit.
Looking at source :
html {
background: transparent url(http://images.freewebs.com/Members/Generationz/CSSStyles/Elements/Water/bg-body.jpg) repeat fixed 0% 0%;
}
It's the "fixed" attribute.
background: transparent url('http://file.jpg') repeat fixed top left;
fixed is the key.
CSS and Backgrounds
<body bgproperties="fixed" background="image">
or
body {background-image: url(../images/tile.gif); background-attachment: fixed; }
You should have:
background: transparent url('image path here') repeat top left;
background-attachment: fixed
Related
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I am looking for background-image for content section of my home page. I have found a suitable picture but it is not fitting properly behind content.
Try it with CSS3 property background-size like this
.element {
background-image: url('{path}');
background-size: cover;
}
See also here: https://developer.mozilla.org/de/docs/Web/CSS/background-size
You should just use background size property:
background-size: 100px 50px;
I have a small problem on my site about background-size:cover
I have been testing it in Firefox all along, but when i load the page in Google Chrome, i get 1px white all to the left. When i use background-position:-1px the white edge left goes away (but then i get it to the right). Is there any way to fix this, and still keep the cover?
I applied this to my body: background:url("images/baggrund.jpg") no-repeat center center fixed; background-size: cover
I can not link to the site at the moment, but hope i described it clear enough.
Thanks in advance
Edit: added a screenshot, top comes from firefox, bottom from Chrome.
Try this:
background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;
In chrome, when you use "background-size: cover", if the xpos of background-image is no less than 50%, you will meet that problem.
So, the xpos is set to 49% (or 49.9% to reduce the error) instead of "center" will fix that problem.
My English is not good, i hope you know what i mean.
That did not work for me, because i used background cover, but i just added a chrome specific line to set my background-size to 101%, that seems to fix it (for the eye).
Thanks for the input.
101% might work fine but you could also try this fine-grained solution:
background-size: calc(100% + 1px);
Alternative :
Another solution would be to reduce or increase the background image's width by 1px in an image editing program if it wouldn't matter.
Otherwise, this should do it (as #estrar pointed out) : How do I fix 1px margin on Google Chrome?
Changed background-size: cover; to background-size: 100%;. Worked for me!
You could apply the background property to the body tag, which would cause it to cover the whole page.
You could also try applying the following style to the body and html tags:
html,body{
padding:0;
margin:0;
}
So I tried all of the solutions out there and could not get that last px to work. Tried all sorts of big and small image dimensions too.
My problem was that I was using svg. I bit the bullet and switched to png.
/* background: url("/static/images/orgchart-background.svg") no-repeat; */
background: url("/static/images/orgchart-background.png") no-repeat;
background-size: 100% 100%;
I was given this design that I'm trying to apply to my website. Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here, but appear halfway down the page here.
You have height: 100% set for your html and body. This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower.
height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit:
Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.
I have a site and I wanted to change it's background. I want to put a background on top and bottom.
Here is the CSS code:
div.bg_top {
background-image: url('bg_top.jpg');
background-repeat: no-repeat;
background position: top center;
}
div.bg_bottom {
background-image: url('bg_bottom.jpg');
background-repeat: no-repeat;
background position: bottom center;
}
HTML code:
<div class="bg_top">
<div class="bg_bottom">
Content Here.
</div>
</div>
is that correct?
i'd suggest using CSS short-hand for best practice
.bg_top { background: url('bg_top.jpg') no-repeat top center; }
.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }
As Lance said just change the background position: to background-position: it should work fine.
But my concern is that, the way you have given the backgrounds, with different resolutions the two background images may overlap and it will screw all the design. So, to make it compatible with all the resolutions you need to choose any other option. I will suggest use any image editor and place the images as you want and make one image and then use that image as the background.
To avoid changing the html, you can also put one of the backgrounds in the html and the other in the body. And use a min-height (height for IE6) to avoid overlap.
It should work if you fix the background-position:
background-position: center top;