I have done a bit of googling and can't way a way to stop my background images overlapping. What I'm trying to do is have a div with a faded background. But when the fade reachs full opacity I want to apply a different background image that can repeat so the div looks flawless no matter how long the div is.
I have thought about just applying full length images for each web page but I would rather have this working so I don't need to worry about how much content I can apply to each page.
#content_holder{
width:800px;
height:1000px;
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png);
background-position:0 0,0 240px;
background-repeat:no-repeat,repeat-y;
}
Added note: the height says 1000px, this is purely for testing purposes as the div is empty at the moment.
The second image does repeat but starts form the top of the div overlapping the other image.
these are the images:
content-top.png show once
content-bottom.png repeat after content-top
Whats happening:
What about just removing background-position and adjust the background-repeat:
background-repeat: repeat-x, repeat;
jsFiddle
edit
Hmm, multiple background just works like this. It's overlaying because the border underneath it is has the full height(it's repeating). A background doesn't see a other background as a boundry. You can do two things:
Make the boundry with a seperate element, so one element for the top
background and one for the bottom background.
You can edit the image to make the transition more smooth, thus you can't really see the border does overlap(a semi-transparent image makes a smooth transition easy)
#content_holder{
width:800px;
height:1000px;
background-color:rgba(0,0,0,.65);
position: relative;
z-index: 2;
background: url(http://i.stack.imgur.com/j3THB.png) top left no-repeat, url(http://i.stack.imgur.com/35j7u.png) bottom left no-repeat;
}
#content_holder:before{
content: '';
position: absolute;
z-index: -1;
top: 240px;
right: 0;
bottom: 0px;
left: 0;
background: url(http://i.stack.imgur.com/35j7u.png) top left repeat-y;
}
Solved it not entirely sure on a full explanation but it works find this post, it was quite similar to mine.
JSFIDDLE
A radical but effective way to deal with this if you have a known max height and you are already in a ":before":
&:before {
background: url('vertical-line.png') no-repeat 0px,
url('vertical-line-repeat.png') no-repeat 140px,
url('vertical-line-repeat.png') no-repeat 200px,
url('vertical-line-repeat.png') no-repeat 260px,
url('vertical-line-repeat.png') no-repeat 320px,
url('vertical-line-repeat.png') no-repeat 380px,
url('vertical-line-repeat.png') no-repeat 440px,
url('vertical-line-repeat.png') no-repeat 500px,
url('vertical-line-repeat.png') no-repeat 560px,
url('vertical-line-repeat.png') no-repeat 620px,
url('vertical-line-repeat.png') no-repeat 680px,
url('vertical-line-repeat.png') no-repeat 740px;
}
Related
I have this small piece of CSS code body { background: url(images/bg.jpg) repeat-x scroll center top; } but I want the background to always stay fixed as background image instead of being fixed at the top of the page.
What are best practises to achieve this? If you look at the picture below you can see that the background is fixed to the top of the screen instead of being fixed as background image even when you scroll down.
body {
background: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
The CSS3 rule 'background-size: cover;' starts at the top left of a div and stretches the background image in aspect ratio so that it dynamically covers the width of the div.
For a particular image I have, it would look a lot better at higher width screens if 'background-size: cover;' started the image from the bottom left of the div (div has fixed height) and covered up and to the right. This way the sky of the image would not be the only thing visible on wide monitors.
After some trial and research I have come up empty. Is this possible?
Thank you
Yes, by using the position bottom left, well described at MDN
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat bottom left;
background-size: cover;
}
<div></div>
Looks like this with the default top left
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat top left;
background-size: cover;
}
<div></div>
Is there a way to set a background to be fixed to the center, and to the bottom, but not flush with the bottom of the element, rather 100px up from the bottom of the element?
(Of course the bg image would only be visible with in the div bounds)
This is what i have so far, but don't know how to bump the image up 100px from the bottom.
background: url("/path/to/bg.jpg") no-repeat fixed center bottom #FFF;
(no javascript answers please)
Very simple:
background-color: #fff;
background-image: url("/path/to/bg.jpg");
background-repeat: no-repeat;
background-position: center bottom 100px; /* answer */
Ref: http://www.w3.org/TR/css3-background/#the-background-position
More to read: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I want to make a trapezoid image with css. I've already found some code, but i want a code which makes the trapzeoid shape with transparent left border.
So here you can see that, the left border of the image has been cut down. I want to do that with css. Is it possible?
So i want to make the picture with the man. It is a simple picture and i want to cut down the left border. I tried this
<div class="trapezoidImg"></div>
.trapezoidImg
{
position: absolute;
overflow: hidden;
padding: 0;
margin-left: 100px;
display: inline-block;
width:510px;
height:200px;
background:url('http://iskolaujsag.blathy-bp.hu/wp-content/uploads/2009/04/getattachment-2.jpg');
background-position: center;
-o-background-size: 510px;
-moz-background-size: 510px;
background-size: 510px;
}
.trapezoidImg:after
{
content : "";
position : absolute;
z-index : 2;
left : -50%;
width : 145%;
height : 80%;
display : block;
background : rgb(51,51,59);
bottom: -90%;
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
transform: rotate(53deg);
}
and it works but the :after tag must have a color, i want a transparent one, but if i set it transparent, the image wont be cut. And the reason why i dont want to edit the images in a photeditor, is its going to be a slider, and i dont want to edit all of the images.
Without any code and any tips of what you want to do in the end, i can go with this idea of gradient and image mixed in the background of a container.
On each side some content ?
Here is a free interpretation of your unclear question, hopping it will make you give us some info usable.
background:
url(http://i.stack.imgur.com/WJ3MT.png) center no-repeat,
linear-gradient(47deg, tomato 50.1%, transparent 50%) left no-repeat,
linear-gradient(47deg, transparent 50%, #333 50.1%) right no-repeat;
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).