I want to hide two images (partially) behind my center/main div ,just like it is shown on the picture i included [the images are blue and the center div is brown,the darker blue color is the part of the image that is supposed to be hiden behind the div].The two images are included in the HTML (as tags).They have to be (as they currently are) part of the HTML and not "injected" via CSS.
The positining of the images isn't a problem,but the "overlaping/hiding" is.I have tried so many times via z-index but to no avail.
Can anyone help ?
link to picture. http://i.stack.imgur.com/ZCKdt.jpg
If you're looking to partially hide them behind the main div, you can either set the parent container (your body tag, if nothing else contains the main div) and add your images in css using background-image: url(image1.png), url(image2.png); and then background-position: left center, right center;. You can also use pixels or percentage to determine the positioning of the horizontal and vertical, respectively. That way, you don't have to bother with the z-index.
However, neither this, nor z-index will solve your other problem of having the images partially visible. For this, you can set the colour and opacity of your main div's background with background: rgba(0, 0, 0, 0);, where the first three zeros can be any number from 0 to 255 which represents red, green, and blue, and the fourth zero represents any number from 0 to 1 (as decimals) which determines opacity. The lower the number, the more transparent the background is. The more transparent it is, the more you can see the images behind it.
Alternatively, you can use opacity: 0; in the same way as above
Without seeing your HTML/CSS, it's going to be harder to diagnose the problem, but it sounds like you're confusing body elements with positioned elements. Z-index won't work for body elements, so you should try to place the blue images into a div and pull that div behind your brown div.
You can find more info and a jsfiddle example at this older post: Hiding a image under the div
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
In CSS I can set multiple background images to appear one after another using the background: attribute, but when these images appear on the page there is no transition and the edge between them looks quite ugly. Is there a way to implement a shadowed border line between two consecutive backgrounds?
e.g.
#main-body{
background: #222222 url(background.jpg), url(background2.jpg);
}
This code will set two images to the background, when one image ends as you scroll down the page the next one immediately begins. There is no visual transition between the two, it's just two images one after another and doesn't look visually appealing.
The best way to handle the situation here is to draw borders on the top and bottom of your image with desired color and desired width. You can use any image editor to do this and this will also make your task simpler.
For clarification look at the following images.
The first one is what I intend to achieve. It's a text input element with two background images, one on each side.
The second image is the sprite image containing the icons I need.
Now my question is, is it possible to clip a background image to only display a portion of the image? Furthermore is it possible to use it with multiple backgrounds?
1st image:
2nd image:
You're going to have to use two separate icon images to get this to work as you expect at the moment.
With CSS sprites, the background is clipped by the size of the element, there is an experimental CSS3 property called background-clip but it doesn't work the way you want (it will clip to the borders, padding or content of the box, not a specific dimension.)
So create two icons, use one on each side of the element with background-position.
As you can see here, with a spritesheet it will display the entire background image instead of the two icons you want. There is as yet no way to clip BG images in the way that you want. (one day, hopefully!)
You will need to use separate icons OR you will need to have 2 additional elements (for showing the icons) overlaid on top of the input box. The latter will let you use the sprite itself.
Set to your element (let's say div) yor big backgound picture and then adjust with background-position. Your image will be croped by your element size (ex. div).
in your case it will be around:
background-position: -87 -35;
and div size:
width: 28px; height: 30px
with CSS3 you can use multiple background images for an element. to show a specific part from the image you need to set its background-position property.
for example:
background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;
you can also define background-postion in pixels like:
background-position: -5px 10px, -35px 10px;
for more information check this link
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I have a div which has css background: rgba(0, 0, 0, 0.85);. Centered in that div is the title of the page. I want to make the title see through (knockout, punch-through, however you want to call it. i.e. see past the div's background black to the background image of the page). The only method of doing that that I have come up with is using an image with the div's background and transparent text and seperate the header part into blocks.
///////////////////////////////////////////////
// (empty) // TITLE IMAGE // (empty) //
///////////////////////////////////////////////
The problem is that I dont know how to create the empty divs such that the image will remain centered (the empty divs need to be there to add the black background). Is there a different way to either do the see through text that doesnt have this problem or a way to center the image div with the empty divs?
EDIT: For an example of the effect that I am trying to achieve, look here:
http://www.showandtell-graphics.com/layer-knockout.html
you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.
You should just be able to do this
<div>
<h1>Title</h1>
</div>
Place the background-image on the div
The h1 will be transparent by default.
To center the title, use text-align:center
To center the background image, you can use background-position:center
Example: http://jsfiddle.net/jasongennaro/EQDZd/