I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
Related
.news-header {
background-image: url(maureske_green_left.gif), url(maureske_green_body.gif), url(maureske_green_right.gif);
background-position: left, center, right;
background-repeat: no-repeat, repeat-x, no-repeat;
height: 31px;
}
This works good but the repeat-x of maureske_green_body.gif makes maureske_green_right.gif to not show up.
Setting a width doesnt make the right image to show neither.
If I do no-repeat on the center image all images show up but of course theres a gap between all three. So how do I fix without making center image same width as webpage?
Thanks in advance!
Jarosław
Top image layer is first in your css, so you need to reorder them this way:
background-image: url(maureske_green_left.gif), url(maureske_green_right.gif), url(maureske_green_body.gif);
In short version your new css will be:
.news-header {
background: url(maureske_green_left.gif) no-repeat left top,
url(maureske_green_right.gif) no-repeat right top,
url(maureske_green_body.gif) repeat center top;
height: 31px;
}
Interesting article about multiple css backgrounds here
I have a div, .cover-section, that I want to have a full background image that is the size of the viewport. I want to use the cover css property. I have got this working for the body of the page, but if I add more content and try to scroll, the image stays as the background. I want the image to scroll along with the content. This is what I have so far:
.cover-section {
background-image: url('../images/cover.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
How would I get it to do what I want?
Remove this linebackground-attachment: fixed;
I want to give my body a background that is fixed in the middle.
So that when I shrink my window it won't start cutting the right-side and keeping the left side static. I want it to cut left and right at the same time.
I want it to be like this example: www.everythingisnew.pt
In that website you can clearly see that the background gets "eaten" by the window at the same time from both sides.
What is the css behind it?
Specify background-position: center in your body element's CSS:
body {
background: url('your/background/src.png') no-repeat fixed center
}
This may solve your problem
background-image: url(src.jpg);
background-repeat: no-repeat;
background-position: fixed center;
background-size: cover;
I have an element that I wish to apply a background to, though I want the background image to be positioned based on its right co-ordinate.
I could use a container div to represent the background though it's not really practical in this situation.
I presently have the following rule:
.myelem {
background-image: url("myelem.png");
background-position: 5% 60%;
background-repeat: no-repeat;
}
Which for the most part works because of the size of the image. If it were possible I'd like to have something that specified that the relative position of the background was middle instead of left.
The css propoerty background-position accepts center as a value:
.myelem {
background-image: url("myelem.png");
background-position: center center;
background-repeat: no-repeat;
}
Or the shorthand version:
.myelem {
background: url("myelem.png") center center no-repeat;
}
Update 1
There is no simple css way to set the background-position to an offset of center (or bottom or right).
You could add padding to the actual image, use javascript to calculate the position after page load, add margin to the element as suggested in the following SO questions:
HTML background image offset by x pixels from the center
Offset a background image from the right using CSS
Alternatively you can use calc to calculate the correct position. Although calc is not supported by all browsers at this point.
Using calc you could do something like this:
.myelem {
background-image: url("myelem.png");
background-position: 5% 60%;
background-position: -webkit-calc(50% - 200px) 60%;
background-position: calc(50% - 200px) 60%;
background-repeat: no-repeat;
}
Demo
I am trying to figure out how to stretch a background image vertically. I am using CSS3 with 3 images in the following way:
background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top
Now I want to stretch these images vertically to that they extend all the way to the bottom. Is there a way to do this?
I'm late to the party here, but this is what worked for me:
background-size: auto 100%;
This will fit the image vertically and let the width do whatever it needs to do (i think it repeats by default). You can also set:
background-repeat: no-repeat;
for it to not repeat the image in the horizontal direction.
Try:
background-size: 100% 100%;
first 100% is for the width and the second for the height. In your case you need the second set to 100%
Thank you for bringing up this question. Below is what worked for me
background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;