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;
Related
I use such css for setting responsive background. When I see it on mobile, the background is zoomed in more and more if there is a lot of content appears on page. What is the proper way to avoid zooming of background? thanx
body {
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
A viewport meta tag like this might help (at the top of your html):
<meta name="viewport" content="width=device-width, initial-scale=1">
This will ensure that on a mobile screen, the content will not be displayed as on a large screen, and the width of the body element will only be as wide as the screen.
Its due to cover, cover will make sure the whole container gets covered with the image. You could try to use contain
You can try to define the body height as 100%, this should avoid vertical stretching of the background image:
body {
height: 100%;
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
And for that body height to work , you should also add this to your CSS:
html {
height: 100%;
}
With these setting, the bodys overflow is the default auto, which will cause a scroll bar to appear as soon as the contents exceed the 100% height.
I am trying to make a CSS backgroun using a picture, but I am failing somewhere. The problem is that when I put a lot of content on the page, the picture gets bigger and the quality goes down. I tried to fix it with Position:fixed but not working. Here's the code:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
Also i tried to put a text-align:justify in the code but didn't work out too. I am messing something up really bad. Would love to get some help!
Cover make :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
You should use contain instead
Try the
background-size: contain;
Because "cover" means "make it cover the entire box.
You can vary background-size like 50% or 60%
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:50% 40%;
}
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:600px;/*use images height*/
height:auto;
width:1000px;
background-size:100% 40%;
How can I fit website background to the browser's height?
Here is my CSS of the background code.
#header {
position: relative;
background: url(girl.jpg) no-repeat fixed center bottom / cover transparent;
text-align: center;
}
I don't want to set height:100% for the image because I don't want the long scroll down. I want neat fit background to my browser's width. Any help?
http://i.stack.imgur.com/w1k18.jpg <- Here is the link to website screenshot.
try this
body
{
background: url(girl.jpg) no-repeat fixed center bottom / cover transparent;
}
add the above css code in your css file...
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
body{padding:0; margin:0; background: #000000 url(images/backgrounds/main_bg.jpg) no-repeat center top; width: 100%; font-family: Arial;}
Here I have a simple background that centers when the browser resizes, which is great, however I have a 1024px centered column and want the background to stop centering like the center column does. Otherwise it looks weird.
Thanks
You need to make the background image the same size as the column, and then put the background picture in the column not in the body.