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...
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;
}
My webpage has content that is contained in a box of fixed size that is always centered, and a repeating background image filling the rest of the viewport. I would like the repeating background to maintain it's relationship to the content box no matter how I resize the browser window. Can this be done with CSS only?
If you use background-position you can fix the background to a particular spot, in this case, horizontally centered as your #main-wrap is.
http://jsfiddle.net/5kmb2/1/
body {
margin: 0px;
padding: 0px;
background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: 50% 0; /* NEW LINE */
}
Yea, set the background-position to center:
background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat:repeat;
background-position:center;
http://jsfiddle.net/5kmb2/2/
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;
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
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.