I'm trying to use multiple background images on a single div with a top portion, a middle repeating portion, and a bottom portion. The issue is that the repating portion repeats throughout the whole div.
Does anyone know of a technique to restrict a repeating background image to a particular portion of a div? If that is not feasible, do you know if it's possible to push the background_middle_repeating.png background images behind the top and bottom background images?
CSS
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px,
url(../images/background_bottom.png) no-repeat 50% 100%;
}
Thanks.
Background layers are created in the order they are specified, top-down; with this in mind, to push the middle layer behind the top and bottom layers, declare it last:
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_bottom.png) no-repeat 50% 100%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px;
}
Note however that if portions of your top and bottom images are transparent, this will cause the middle image to show through those transparent portions. In such a case you will need to find a different way to restrict the area of the middle background image through some other means. Depending on your layout, this could be as simple as filling in those transparent areas using an image editor, or this could require the use of pseudo-elements or assigning the top and bottom images to different elements altogether.
Related
I have an image (let's say it's 100px by 100px). I want to use the image as the background of a div, however I only want the first 50px by 50px to be visible (the other three 'corners' will be used as other backgrounds). I also want to scale the image so that the piece of the image I specify fills the div. For example, if my div is 150px by 150px, i'd want to crop by image to 50px by 50px, and then render it as 150px by 150px.
I can render the image in the background like so (using react): <div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>, however this does not scale the image back to the size I want it. How can I achieve the effect I desire?
Is it described in the image below, where the black square is the div, and the red is the content I want visible in the background, while the blue & red are the entire source image.
This is similar to this question, however that answer is several years old and does not rescale the image either.
To divide the image in four you need to double it's dimensions (in relation to the containing div)
background-size:200% 200% ;
Then you use background-position to choose the portion you need:
div{
background-image: url('http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
height: 150px;
width: 150px;
background-size:200% 200% ;
background-position: 0 0; // is top-left
/* background-position: 100% 100%// is bottom-right */
}
<div>
PS: reactwise you need to camelCase the hyphened properties( ex: background-size will become backgroundSize )
This is a little tricky to explain what is happening.
http://easyuniv.com/staging/gonzaga/
If you go to my site above, you can see how the background image moves around when the window is shrunk and expanded horizontally. I am hoping to make it so that the bottom left corner of the image is fixed in the bottom left corner of the window regardless of the window size, and then if it is wider, it will show more of the image. How can i accomplish this? I have tried a lot of different variations of settings
Set your background position to left bottom:
html {
background-position: left bottom;
}
Alternatively, just use the shorthand property to combine it with your background-image statement:
html {
background: url("img/background_image.png") no-repeat left bottom;
}
I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.
Any suggestions?
Update: Working example: http://jsfiddle.net/BkAcu/2/
Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.
Set the background-position to a negative value, to move the bg to the left.
See also: https://developer.mozilla.org/en/CSS/background-position
Example (assume your TDs to have a width of 100px, and the image to be 200px);
#td1, #td2 {
background: url("200.png") no-repeat;
}
#td2 {
background-position: -100px;
}
background: #f0f0f0 url(/tile.gif) repeat -70% 0;
What is the -70% doing?
It's moving the background image right by 70% relative to it's current position.
This is useful for placing a tricky background image in the right position, or to achieve a certain effect.
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.