I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.
#about {
background-image:url('http://i.imgur.com/B922OoM.png');
background-position: center;
background-repeat: none;
background-size: cover;
background-color: transparent;
z-index: 2;
height: 450px;
width: 100%;
}
I can't get the div to not fill with white behind the image.
jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about
(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)
Your image is fine.
It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white
Red BG body JSFiddle
To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.
Overlayed divs with negative top margin
Related
I have two adjacent elements:
Hero Div, with a background image
A 60px high element beneath that
I gave the Hero Div a clip-path, to angle the bottom right corner of the image slightly up. I need the div below that to match the angle, so I gave it a transform: rotate(x) property. Only issue is that as the hero div scales with its percentages the transformed div doesn't scale with it, leaving white spaces to the left or right depending on the size.
I am sure this is an easy task for a lot, but I can't think of a way that is suitable for production.
div(id="front")
section(class="hero overlay")
main
h1 xxx
div(class="angled")
Imagine the bottom right corner of this gray box above as slanted upwards, so as to create the effect of the box being tilted.
I solved it this way:
.hero {
background-image: url(../images/hero.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 100%;
}
.angled {
background-color: #fff;
border-top: 60px solid color('one');
padding-bottom: 40px;
margin-top: -40px;
transform: rotate(-2.5deg);
width: 110vw;
z-index: 99;
}
As a classical mobile first approach, the background hero image only gets 250px of a height. The angled div is where the money is at. The padding-bottom along with the z-index prevents the hero image from spilling out on the bottom (hides it). The negative margin-top value pulls the div upwards and aligns it with the bottom left corner of the hero image.
I had the hero image itself angled but decided to take it out so that I don't have to worry about two elements with the same responsive angles.
Hope others see this and take a similar mobile-first approach.
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
This a WavyBar component that is made of a div with 3 background images. The photo and 1 wavy white image at the top and another at the bottom on the top of a photo. That creates the wavy effect.
silver line on the top and bottom of the page
As you can see on this image, there is a silver line on the top and bottom of this div, which is where the background photo is leaking outside of the div.
The css used is the following:
background-image: url(2de1e10e83bb3f12dc8bfeb1818ee536.png), url(eeb31e00f15749916d5fd9d3ab2b8f10.png), url(f03c768d84f5d17e39ba033692433d0f.png);
background-repeat: repeat-x, repeat-x, no-repeat;
background-position: left top, left bottom, center center;
background-size: auto, auto, cover;
adding these styles, kinda solved the problem, but created a white line on the top of the div
padding: 1px 0;
background-clip: content-box;
https://cloud.githubusercontent.com/assets/1951007/20140914/fe52e0c0-a674-11e6-944e-f16a6791659c.png
Already tried box-sizing: with all values
Got into similar issue. The background-color set for an image was leaking from top and bottom, even after playing around with margin, padding and box-sizing.
Finally below solution worked for me. You need to wrap the image in a Div element with height same(or lower than) as that of the image. And push the image slightly to the top.
.image{
position: relative;
top: -4px;
}
.parent{
height: 240px; // keep it fix or use css calc() function
}
I am wondering how can I something like this with CSS & HTML:
https://www.vatsim.net
You open the page and you get a backrgound that fits all the browser, but then you scroll down and you get a solid color as background and more info.
I tried with this, but is not what I am looking for, I want something like the link on the top,
https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Thank you very much!
You can get far by just adding a bit of CSS. In the snippet below, there are two divs. The first one is for the top area with the image. The second one is for the rest of the content.
The first div gets a height of 100vh, making it 100% of the screen height. The background image is centered and set to scale so it covers the entire div. And, well, that's basically all there is to it. No script needed.
* { /* Just get rid of some whitespace */
padding: 0;
margin: 0;
}
div.image {
height: 100vh; /* div is 100% of viewport height */
background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
background-size: cover; /* Entire div is covered by the image */
background-position: center; /* Image is centered relatively to the div. */
}
/* Just some styling to make it visible. */
div {
color: white;
font-size: 150%;
}
div.content {
color: black;
background-color: #eee;
height: 2000px;
}
<div class="image">This is the top area. The image exactly covers the view.</div>
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>
The webpage you added is basicly splitted to divs, the first is 100% height and 100% width. therefore you can see him all over your screen.
The others are just divs with 100% width but not 100% height, which gives you the ability to switch the background color from light gray to white and then to gray.
Not too complicated but yet a nice design
I have an issue with my background not covering the whole site from top to bottom. I know what causes the problem, but as to fixing it I am unsure. My CSS looks like this:
#background-img{
display: block;
position: absolute;
background-image: url(http://images2.alphacoders.com/778/77840.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
width: 61.8%;
margin-left: 19.1%;
height: 100%;
opacity : .3;
}
The problem seems to happen where the at the point where I add height. But I am not allowed not to have it there as there wont be anything to have a background for. The problem initially is that I need opacity on the image, so I can't just make it cover the wrapper either, as that will give the whole site opacity, not just the background.
If anyone ever should read this post. I found a solution. I just moved the whole background-image div to the top of the very wrapper div, and made the position fixed, instead.