Is it possible to blend the iterations of a single background-image when background-repeat is set to repeat like so:
Solutions using javascript are also welcome.
Thanks in advance
You would need 2 images for this.
one that tiles seamlessly
and the starting top image which doesn't tile.
Your element will use the tileable one as its background. The background position Y should be the height of the non-tileable one.
You can then add a pseudo element ::before on top of your element positioned to the top which has the background of your non-tileable image.
div
{
position: relative;
width: 813px;
height: 2000px;
border: 3px solid red;
background-image: url(https://i.imgur.com/joeNpq8.png);
background-repeat: repeat-y;
background-position: 0 682px;
}
div::before
{
content: '';
width: 813px;
height: 682px;
background-image: url(https://i.imgur.com/iYgZFsw.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
<div></div>
Related
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
Im able to give the start position of an background image. But if i give positions for solid fill background its not working.
Here is the js fiddle for that.
http://jsfiddle.net/yPVJE/
So can we set the start position and the size of an solid fill backgrounds?
Thanks!
I would take a similar approach to StuR, but using background position instead of gradient points. You can then set your background position as you would usually.
div {
background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}
This is one way to offset a solid background color, using a linear gradient with a transparent colour for the first x number of pixels:
.offset {
background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%);
width: 100%;
height: 500px;
}
Here's a demo on JSFiddle.
You can not offset a background color. Only background images have a position.
If you can make a ::before pseudo element with bg color, height and width and just offset it from its parent, you'll have complete control of its appearance. Much easier than putting a border in the pseudo element:
/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */
.myElement::before {
background-color: #fff;
content: "";
margin: 0 auto;
position: absolute;
top: 43px;
right: 0;
width: 300px;
height: 201px;
z-index: -1;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Yes, with linear-gradient it works:
div { background-image: linear-gradient(transparent 10px, grey 10px); }
Watch out for improper alignment when linear-gradient points are used.
Here's a better approach:
background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;
It uses linear-gradient just to generate solid color, which is then resized to reflect the covered area size.
Also background-position could be used as needed, for example:
background: linear-gradient(#6699cc, #6699cc);
background-size: calc(100% - 30px) auto;
background-repeat: no-repeat;
background-position: right;
In the last example, the background color would 'start' 30px from the left of the div.
Further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use background-size instead of background-position to restrict the colored area:
// randomly set background size every 1 second
var elm = document.querySelector('div');
window.setInterval(()=> {
var randomValue = Math.random()*100;
elm.style.backgroundSize = randomValue + '%';
}, 1000)
div {
height: 100px;
border: 1px solid black;
transition: .4s ease-out;
background: linear-gradient(to right, black, black) no-repeat;
background-size: 0; /* <--- starting from 0% */
}
<div></div>
Another way to accomplish this would be to add a pseudo-element to the div element like so:
div {
::before {
border-top: 10px solid #0066a4;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 12px; left: 0; right: 0; bottom: 0;
z-index: -1;
}
}
See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm
You can achieve this by having the parent element and child element position: relative;. Next, you can just go in and set offsets. There are a few other ways to achieve this but this is one of the many takes.
SCSS:
HTML:
EXAMPLE:
Note this might have side effects for buttons and links. Test it for your use case. Good luck!
Happy Coding