I want to set a non scrolling background image(1170x700) to an element() which is 1170px wide. For that I used following css
.container
{
background:url("bg-image1170x700.gif") no-repeat fixed center top #fff;
}
PROBLEM :- Initially the image is being truncated and if I scroll down its displays correctly. Not sure what am I missing ?
You can use background-size:
.container
{
background:url("bg-image1170x700.gif") no-repeat fixed center top #fff;
background-size: contain;
}
You are displaying it fixed. It is most likely being hidden by another element, and when you scroll it scrolls out from behind that element
Related
I have this small piece of CSS code body { background: url(images/bg.jpg) repeat-x scroll center top; } but I want the background to always stay fixed as background image instead of being fixed at the top of the page.
What are best practises to achieve this? If you look at the picture below you can see that the background is fixed to the top of the screen instead of being fixed as background image even when you scroll down.
body {
background: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
I have a simple page which should always have its background image centered horizontally.
Here is my css:
body {
background-image: url(htts://url_to_my_image.png);
background-position: top center;
background-repeat: no-repeat;
}
and my jsfiddle:
The problem occurs when the browser window isn't tall enough to fit the entire image. I seem to be unable to scroll to the bottom of the page (thus cannot view the bottom of the image). What am I doing wrong?
background-size: 100% 100%; may help you
UPDATED FIDDLE
ADDED CSS ::
html,body{
background-size:100% 100%;
min-height:100%;
}
and if you want a scroll bar to view the full image then dont use that image using background but display it using <img src="" />
OR..
if you still want to have a scroll bar to show the full image while it is set as backround then set the min-height of your container (in your case html,body) equals to the actual height of the image
MAKING BACKGROUND IMAGE SCROLL
I have this css for my body tag
background: url(images/homepagebg.jpg) no-repeat center;
But it stops short at the bottom of the page. The image is high enough to fill my whole screen.
Any ideas?
The HTML body only covers your entire screen if the entire screen is used up by content.
you can try
body{
min-height: {height-of-your-image-in-pixels}px;
}
I found the solution, I had to add fixed to the end of the background property, eg
background: url(images/homepagebg.jpg) no-repeat center center fixed;
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards
So I am trying to do 2 things that work well on their own, but I'm having trouble integrating them together. First off, here's a link to the site: http://ericbrockmanwebsites.com/dev4
Create a fullscreen background image using
html {
min-height:100%;
background-size: cover;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
create a footer that stays at the bottom of the page, even when there's no content, which normally would require something like this:
html {
height:100%;
}
body {
height:100%;
}
.container {
min-height:100%;
}
#footer {
clear:both;
position:relative;
}
The problem is that in order for the footer to stay at the bottom the height of the html / body needs to be defined at 100%, but unless I define them using the min-height value, the background image just covers the screen as it loads. Meaning that if / when there's a need to scroll down, the background image only goes down to where the bottom of the screen was on load.
I've played around with this for a few hours, but can't seem to find a resolve. Am I missing something obvious?
Firstly, height and min-height aren't mutually exclusive. There's no reason you can't use both. As for the background scrolling when the page is longer than the available space, have you tried background-attachment: fixed?