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.
Related
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>
I am making a One-Page webstie to practise Flexbox etc.
To do that, Im using PSD file and I have some troubles.
I wanna make rectangle with an oblique upper side with opacity on my background, i read about svg and should I do it with that like on this picture:
(brown thing with opacity throughout the website view)
I have again similar problem. I have a pic:
And it should looks like:
Tips will be great
You could do this with a CSS gradient.
Here I have a <div> with two backgrounds:
the image
a CSS linear gradient on top of it.
The sharp edge of the gradient works because there are two gradient steps that coincide. Meaning the gradient colour jumps straight from transparent to 50% blue.
I've used blue so that it shows up well in this example. In your case, just switch it to brown.
div {
width: 1240px;
height: 648px;
background: linear-gradient(175deg, rgba(0,0,200,0) 0%, rgba(0,0,200,0) 70%, rgba(0,0,200,0.5) 70%, rgba(0,0,200,0.5) 100%),
url(https://i.stack.imgur.com/Rq6eR.jpg);
}
<div></div>
Another approach without gradient.
Create a wrapper
It can be the div with background image. Important thing is you need to overflow: hidden and position: relative.
Create a rectangle and rotate it
You can create a :before pseudo element like this:
.wrapper {
position: relative;
width: 100%;
height: 200px;
background: red;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
display: block;
background: blue;
opacity: .5;
bottom: -100px;
left: -100px;
right: -100px;
height: 150px;
transform: rotate(-5deg);
}
<div class="wrapper"></div>
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.
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!
This is my HTML:
<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>
user-avatar class is following:
#user-avatar {
width: 100px;
height: 100px;
margin: auto;
position: relative;
background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}
Frame:
#user-avatar img {
position: absolute;
top: 50%;
left: 50%;
width: 122px;
height: 127px;
margin-top: -62px;
margin-left: -63px;
}
Original user-avatar background image dimensions are 23x25 but I want it to be resized to the 100x100px, and the problem is that whatever I set in the width: xxx attribute it'll not work. The avatar that is behind the frame has everytime his original dimensions.
You can't resize an image set as background of a container. The only way you can resize a image is using a img tag and resizing it with width and height css attributes.
Take a look here may be it helps.
You could use background-size, however only the most current browsers support it: https://developer.mozilla.org/en/CSS/background-size
You can use the CSS3 background-size property, for those browsers that support it, then fall back to a compromise solution for older browsers. The compromise solution could be to set a background color to fill up the space around the background image or to use the background-repeat property to "tile" the image.
For example:
#user_avatar {
...
background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
background-size: 100px 100px;
}