I want to give a container a background image, which is basically a white image, with a fancy border on its left and right side. It is only a few pixels high so gets repeated on the y-axis.
However, the image is a set width, so cannot expand/contract on the x-axis. Is there a way of maybe giving the container 3 background images - 1 for the left border, 1 for the right and 1 for the centre?
That way I can repeat the centre background image and sandwich it between the side background images.
I had two images and did it with that you can add another one http://jsfiddle.net/xksr01v4/
#back{
width: 500px;
height: 250px;
background-image: url(http://placekitten.com/300/301),
url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139- batma.jpg);
background-position: left, right;
background-repeat: no-repeat;
}
#container{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, right top, center top;
}
There are probably many ways to do this, but this link shows a very simple way of having an expanding background image:
background-size: 100% auto;
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;
}
The CSS3 rule 'background-size: cover;' starts at the top left of a div and stretches the background image in aspect ratio so that it dynamically covers the width of the div.
For a particular image I have, it would look a lot better at higher width screens if 'background-size: cover;' started the image from the bottom left of the div (div has fixed height) and covered up and to the right. This way the sky of the image would not be the only thing visible on wide monitors.
After some trial and research I have come up empty. Is this possible?
Thank you
Yes, by using the position bottom left, well described at MDN
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat bottom left;
background-size: cover;
}
<div></div>
Looks like this with the default top left
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat top left;
background-size: cover;
}
<div></div>
i am working on a project in which I have a background image all over the page and over that on the left half of it I have a div in which there is lots of content along with a slider.
The image is of a girl.
background image is in body tag and we cannot move it to another tag.
now the problem is that the background image is cut in half from the left due to that slider content. now we cannot see the girl's face, only her body
I have to move that image towards right so that we could see her face also
i tried to crop the free space from image but that didn't help and we cannot move the slider content.
Image size: 5MB
Resolution: 2710*4072
tried to do margin-right
padding-right
background-position:right
but i can't move that image an inch to right
background-color: #ffffff;
background-image: url('/2014/12/Profile-Background-image.jpg');
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
line-height: 1;
Sample code: http://jsfiddle.net/gmunish/dby4e86j/
Image is not visible so you can add your own image and check
You can specify how far from the right you want the background to be if that is useful.
for example if you wanted the image to be 50px from the right you could use:
background-position: center right 50px;
you could also use a negative value to move it further to the right like so:
background-position: center right -50px;
I have a fixed, full screen background. I have another image a few hundred pixels from the top that I want the background to appear to emanate from. Looks good here: http://imgur.com/Rlki1Bk.jpg but when the browser is resized the centre of the background image moves vertically but the foreground image remains fixed so they are no longer aligned. Any help would be greatly appreciated.
EDIT: Some more info. The foreground image is position:relative, and here is the CSS for the background image:
.background {
background-attachment: fixed;
background-image: url('/background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Hard to tell what's going on without some code, but...
background{
background-image: url("my-image.jpg");
background-position: center top;
background-size: 100% auto;
}
This will ensure that the distance from the top of the window to the other image never changes because the height of the image remains the same, and the position of the image is always flushed to the top. The problem that you'll encounter is that depending on the width of the device your background may stretch.
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).