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/
Related
I am trying to have a background image cover the vertical length of the page. When I add background-repeat: repeat-y; the image stretches. When I have background-repeat:no-repeat; it doesn't stretch. What is happening here? I don't want it to stretch, I just want it to repeat until the bottom of the page.
Here is the CSS:
.backgroundTest{
background-color:white;
background-image:url(../images/sideBanner.jpg);
position:absolute;
background-size:175px 100%; /* I need this, otherwise the background image is too big */
background-repeat: repeat-y;
}
The main issue is I want an image along the left side of the page (width 175 px) with all the content to the right of this image. I'll take any solution!
Use table where you can add contents in one column and image in another column.You can set width of image accordingly
try this,
background-size: 100% auto;
I'd wrap the image in a <div> and use the background-size CSS property with one of these two values:
contain
Scales the image as large as possible without cropping or stretching the image.
cover
Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
e.g.
.wrapper-container {
position: relative;
height: 100%;
width: 175px;
}
.backgroundTest {
background-image: url("../images/sideBanner.jpg");
background-repeat: repeat-y;
background-size: contain;
background-color: white;
position: absolute;
}
This seems to be a common question but the existing answers I see do not seem to work for me. I have a background image that is much taller than it is wide. I would like the height to be 100% of the height of body. So far I have tried:
body, html {
height: 100%;
min-height: 100%;
}
body {
background:url("NewLogo.png") no-repeat center center;
background-size: 100% auto;
}
I have also tried changing background-size: cover; but this also just makes the image large but cuts off the top and bottom.
Use contain. This will guarantee that the entire image appears in the container, and nothing is cut off:
body {
background:url("NewLogo.png") no-repeat center center;
background-size: contain;
}
Please note that if you want to have a background image which is cover and has got it's own height (without just being large, as wide as your browser but loosing the top & bottom as you said), you can try giving an appropriate height in vh to your background image.
body {
margin: 0;
}
#image {
background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
background-repeat: no-repeat;
height: 293vh;
background-size: cover;
}
<div id="image">
</div>
Otherwise if you just want to make your background image cover, or if you want make it contain(though your image wouldn't fit the browser wide, it would be in it's real height), you can visit the following link:
codepen>background-size>CSS-Tricks
Currently, if my browser is half the monitor's size it will shrink the background to fit the width, cutting off the height and the bottom. I'd like it to instead, keep the height, filling the whole page, and keeping the aspect ratio but just centering the photo and cutting off the sides of the photo, my current CSS is just
body{
background-image: url("/background1.jpg");
background-size: 100%;
background-repeat:no-repeat;
display: compact;
}
Any help on how to do this would be great, thank you
Adding background-size: cover should do the clipping and keeping aspect ratio.
Adding background-position: center; will keep the image in the centre.
(replace rule for div and place it to your body - I used div here for the sample code only)
See running sample below
div {
background-image: url("http://placehold.it/1000/1000");
/* Resizes image to fill div; retains aspect ratio. */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 2000px;
}
<div>
Lorem Ipsum
</div>
background-size: cover;
Should do what you need. Handles cropping / scaling pretty elegantly.
use background-size: auto 100%; in that rule:
body {
background: url("/background1.jpg") center center no-repeat;
background-size: auto 100%;
}
The first parameter (in background-size) is the width, the second the height of the image. If there is only one parameter (as in your rule), the browser will assume it's the width and set the height to auto. My version should give you the full height and adjust the width automatically (and center the image)
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/
I'm trying to edit the background so it stays centered. However everytime I resize the window to say a smaller size to test it out, the image shifts more and more to the left. I tried other codes but they wind up scaling down the background. If I view my page on another computer, the image is off center as well. :(
<style>
html, body {
margin: 0px;
background-color: #000000;
background-image: url('http://i.imgur.com/zwbnaPk.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
I'd like it to look centered like this regardless of the window size. Although it's slightly off in this photo, you get what I mean.
http://i.stack.imgur.com/iN5BR.jpg
First of all...the black center part on your background is not on the center and second, you could accomplish same results with less CSS
html,
body {
background: #000 url('http://i.imgur.com/zwbnaPk.jpg') center no-repeat;
background-attachment: fixed;
margin: 0;
}