Not sure if there's an trick to do this but I am looking for a way to basically use CSS to repeat a background image(repeat-y) to a certain point at the bottom of the element like 80 px.
I really hope there an way to do this.
.rep-img {
background-position: center left;
background-repeat: repeat-y;
background-image: url('../images/image.png');
background-repeat-y-stop: 80px; /* made up property */
}
Put the background on a pseudo element:
.rep-img {
position: relative;
}
.rep-img:before {
content: '';
background: url('../images/image.png');
position: absolute;
top: 0; right: 0; left: 0;
bottom: 80px;
z-index: -1; /* to push it behind any content in .rep-img */
}
Here's the fiddle: http://jsfiddle.net/T7JBx/
Related
I have a div with a background color and a background image. The div calls this class:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
I am trying to make only the image somewhat transparent. I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
opacity: 0.6;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the entire div transparent.
So I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png) opacity(0.6);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the image disappear entirely. Can this be done?
What you're trying to do on that single element isn't possible, but there's plenty of ways that could do the same thing with very little extra effort. Probably the best way would be to either add an additional child element to the .cakebg element with the same dimensions that only has the background image, with opacity. Such as:
.cakebg .child-element {
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If you're trying to keep your markup clean, you can even add this as a pseudoelement. Such as the following:
.cakebg:after {
content: "";
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If neither of those methods work, a last resort could be editing the image to have that opacity baked in from your favorite editing software. Hopefully some of these methods might help!
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
position: relative;
}
.cakebg::after {
content: "";
background: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
OR you can simply use an trasparent png image as background
There is no CSS property to make just the background transparent, but you can fake it by inserting a pseudo element with the same size of element behind it and change the opacity of this.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
.cakebg::after {
content: "";
background-image: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Please note that that question was already asked quite often, read here for example.
I have a background image for the wrapper div of a page. I want the image to be 0.5 opaque. My problem is that all other items inside the div also become 0.5 opaque. How can this be avoided?
#detailswrapper
{
background-size:cover;
background-repeat: no-repeat;
opacity:0.5;
}
you can use something like this
JS Fiddle
div::after {
content:"";
background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
I'm trying to 'fake' multiple backgrounds in IE8 using the :before pseudo class on the body element.
body {
background: url('../image/header.gif') no-repeat center 50px;
}
body:before {
content: '';
background: url('../image/footer.gif') no-repeat center 100%;
width: 100%;
height: 100%;
top: 0px;
display: block;
z-index: 1;
position: relative;
}
I can't seem to get it to work though? IE just doesn't seem to recognise it at all neither in terms of displaying the 2nd background or showing the attributes in the developer tools.
Here is a link to the page too if that helps:
- http://www.concept.mattpealing.co.uk/grtsdfstvl-31-07-2014/dev/
As mentioned in the comments, you need to give the parent of a relatively positioned element an explicit height, which is why height:100% on the :before will not work.
positon:absolute on the body will do the trick.
body:before {
content: '';
background-image: url('../image/footer.gif');
background-repear: no-repeat;
background-position: center 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: 1;
}
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll