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
}
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.
Ok, I'm trying to design a website that has an image at the top that spans the full width of the browser. And below that I want to put different colored div containers that also span the full width. kinda like this:
http://hayden-demo.squarespace.com/
I've tried background-size:cover but I want different backgrounds for each section of the page. The only thing I've found after many hours of searching is width: 100% but it leaves white borders around my image...
Please help, I'm desperate. This is my current CSS:
.mainimg {
background-image: url(_DSC0656.jpg);
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
width:100% !important;
height: 700px;
margin:0 auto;
display:block;
}
The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :
body{
margin: 0;
}
If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).
did you tried to reset the margin and padding of all element to 0, if not then try following code into your css file.
*{
padding:0;
margin:0;
}
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
I've been dealing with a problem for a day now, and I seem not to be able to solve it. I've got four images I want to use as CSS background on the <body> tag. They are supposed to be aligned as the corners of the page.
According to multiple resources I should set the min-height on both the html and body element to 100% if I want the placement my CSS background to be relative to the entire content of my page (which extends beneath the viewport) and not just to the viewport. However, this is not working. The bottom two corner images seem to be stuck to the bottom of the viewport.
I'm using this for CSS:
html {
min-height: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
background: url(../images/bgTopLeft.png) no-repeat left top,
url(../images/bgTopRight.png) no-repeat right top,
url(../images/bgBottomLeft.png) no-repeat left bottom,
url(../images/bgBottomRight.png) no-repeat right bottom;
}
My HTML shouldn't matter much here as I'm using the <body> tag, can't do much wrong there. The doctype is HTML5 in case anyone wants to know.
I've tried changing the setting of background-attachment to fixed, I tried the various settings of background-origin even though it doesn't seem to have to do anything with my current problem. I tried breaking up the multiple shorthand background into all the separate statements that are in there. I can't get it to work.
I'd rather not resort to sticking the bottom two corner images into a footer or a div at the bottom of my page that's just there for styling purposes. What I want, which is a <body> tag with four backgrounds positioned in the four corners of the entire page, should be possible, I just can't figure out what's going on here.
I've made a pen of what I think you're trying to achieve here:
Codepen example
I've used background-size to size the background images.
You may need to tweak this to match the size of your background images:
eg:
background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;
depending on what size your images are.
.cornerBox {
background: url(../img/main-part.png) repeat-x top left ;
width: 400px;
height:100px;
border-radius: 80px;
padding: 0 0;
behavior: url(PIE/PIE.htc);
}
In IE8 between background images parts is spacing 1px, how to remove this space, image width is 28px I want repeat-x
I had created a jsfiddle example with your code, but used some other image. Tested it in IE8 and found there is no issues.
So I believe the problem may be with your main-part.png. The image may have a white border or something. Double check your image.
EDIT:
No issues with your image also. CLICK ctrl+0 on IE to make sure you are viewing in 100%
I had similar problem with two divs with background images next to each other. I solved it by assigning:
background-size: cover
Which stretched your image to cover the entire div