I have an HTML page, and this css:
body {
color:#000;
/*BG Image is specified by javascript*/
background-repeat:no-repeat;
background-position:top left;
}
What you have to know, is that the page is not big enough in height, so if loaded correctly, there's a small gap between the bottom of the screen and the last line of text displayed.
I would like to make it so that the background sticks to the bottom right part of the screen, but when I change top left to bottom right, it just seems to stick to the bottom of the webpage (aka where the text ends), rather than to the bottom of the screen. I'm not sure if there is a solution, but if there is, please let me know
you need a background-size: cover property in the body tag
this will make the background cover the whole body element
try this
body {
background-position: bottom right;
background-attachment: fixed;
background-repeat:no-repeat;
background-size: cover;
}
Try setting height:100%; in the body selector:
body {
color:#000;
/*BG Image is specified by javascript*/
background-repeat:no-repeat;
background-position:top left;
height:100%;
}
Related
I am trying to place a background image in the background of the body tag using right bottom but for some reason the image almost totally appears out of view. Besides a solution I would like to also understand why this is not working as I expected. I changed the combination to other settings like left bottom and still image is out of view.
The image is this one: https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1
body {
background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1);
background-repeat: no-repeat;
background-position: right bottom;
}
<body>
</body>
The body doesn't have enough height yet to get the image rendered as expected, so you can to this in a couple ways:
set html, body { height:100%}
html,
body {
height: 100%
}
body {
background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
}
set body { height:100vh}
body {
background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
height: 100vh
}
This is because there is nothing in the body, there is just not enough space for the image to appear.
Example:
https://jsfiddle.net/hhs8jvgr/
I am doing a padding for my body tag like this because I am using a nav bar fixed top. I want the nav bar to always stay on top.
body {
padding-top: 70px;
}
Now I want to add a background image to the body and want it to cover the entire screen. So I do this.
body {
background: url(background.jpg);
background-size: cover;
}
But the problem is that the nav bar covers parts of the image, the 70px padding is not working on the background image. Please help fix this.
Position the background 70px down using the offsets available in background-position
Background-Position # MDN
body {
background-image: url(http://www.fillmurray.com/g/200/300);
background-position: top 70px center;
background-size: cover;
background-repeat: no-repeat;
}
By default, background does cover the padding, yes.
So one possible solution would be to use background-origin to tell the browser the background should start in the upper left of the content, rather than the padding area.
html {background:white; height:100%}
body {
box-sizing:border-box; min-height:100%;
padding-top:70px;
background: url(http://www.fillmurray.com/g/200/300);
background-origin: content-box;
background-size: cover;
background-repeat: no-repeat;
}
This one would have the advantage of being dynamic; i.e. you wouldn't need to change its value if changed the value of the padding.
Right now when I resize my background image, it does not distort the image size (which is good), but it doesn't crop it either. For example, my background image is a banner at the top of the page with a graphic on the left side. When I drag my window from the left towards the right, the graphic maintains it's position to the left of the screen. I'd like the image (as well as all of my website content) to be cropped when I resize the image. (So that the browser doesn't try and fit all the content (including the header) on the now-smaller page.)
This is my css code for the background image
body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0; }
Also note: All of my content will be centered on the web page -- if this helps with anything.
body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-size: cover;
}
body, html {
width:100%;
height:100%;
}
body {
background-image:url("images/header.jpg");
background-repeat:no-repeat;
background-position:center center;
}
Here is a jsfiddle for you :) https://jsfiddle.net/www139/5wqp3622/
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 used an actual image for the background-image inside body tags then fixed it to have an example of the actual site
When I view on a large screen the background image tiles like this
How can I make it in such a way that the image does not tile and remains a 'single' that was shown in the actual website.
The CSS I'm using is below
body {
margin:0; padding:0;
background: url(../images/new.jpg) fixed #A8BFAD;
}
If you want the image to remain actual size:
body {
background: url(../images/new.jpg) fixed #A8BFAD no-repeat;
}
If you want the image to fill the screen:
body {
background: url(../images/new.jpg) fixed #A8BFAD;
background-size: cover;
}
Add background-repeat:no-repeat; to body in your CSS
body {
margin:0;
padding:0;
background: url(../images/new.jpg) fixed #A8BFAD;
background-repeat:no-repeat;
}