I'm trying to use 2 instances of background-image in one <div> layer.
The first background-image (which is partly transparent) should be displayed at top of the <div>, the second should be displayed directly under the the first background-image (this works).
Due dynamic content the second image with a height of 1px should be repeated vertically (repeat-y) and start repeating under the first background-image. My Problem is when I try to repeat the second background-image it is repeated over the whole <div> layer.
.mainFrameRoundBorder {
border: none;
background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
background-repeat: no-repeat, repeat-y;
border-radius: 0 0 0 0;
box-shadow:0 0 0 0;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-position: center top, 0px 364px;
margin-top:10px;
padding: 6px 15px;
overflow: hidden;
color: #FFFFFF;
}
I would suggest using the :before or :after pseudo-selectors. You could place your repeating background on the div as you normally do, and then put the non-repeating background in a pseudo-selector element.
This tutorial should be able to give you some good pointers on this method:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I would suggest you to use z-index
Related
I'm trying to add a vignette effect to an <img>.
I know there are solutions where it can be solved adding a <div> parent and a CSS, but it's not what I'm looking for.
HTML
So this is what I have...
<img src="https://example.com/image.jpg" class="vignette">
CSS
And I need help with this...
.vignette {
}
To reach this...
Any ideas?
The first obvious thought was an inset box-shadow. However that does not go over the actual image.
It will go over a background-image.
So this snippet keeps the given HTML img element as is but actually renders the image as zero width by making the element have padding which completely fills it.
The original image is put in as a background-image and a box-shadow inset overlays it.
Obviously you'll want to play with the shadow's parameters to get the sort of effect you want. This is what this snippet produces:
.vignette {
width: 400px;
height: 300px;
background-image: url(https://picsum.photos/id/129/400/300);
background-size: cover;
background-position: center center;
padding: 150px 200px;
box-sizing: border-box;
box-shadow: inset 0 0 70px 50px black;
}
<img src="https://picsum.photos/id/129/400/300" class="vignette">
I have this code for my border:
border: 1px solid #CCC;
Is it possible to have some similar CSS where the border has a width but it's not visible. In other words if there's a blue background then that would show right through the border?
A margin occupies space and is transparent. The space a margin occupies is on the outside of the element, so it takes the background color of the parent element. If you want it to be space with the same background color as the element you are modifying, you would want to use padding.
This is a great resource that shows you what you will probably want:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Yes, it's entirely possible.
Normally, a transparent border would show the background color of the element beneath it.
This can be overcome by restricting the background to the "box" holding the padding & content using background-clip:padding-box (or optionally content-box which would clip the background to the content area only).
Then you can add a boxshadow (for instance) which will sit outside the transparent border.
body {
background: linear-gradient(to bottom, orange, pink);
}
div {
width: 200px;
height: 200px;
box-sizing: border-box;
background: rebeccapurple;
margin: 2em auto;
border: 10px solid transparent;
box-shadow: 0 0 5px 5px green;
background-clip: padding-box;
}
<div></div>
You can just set the border-color to transparent
Yes it is possible to have transparent border. Just use rgba color defination like so:
border: 10px solid rgba(50,50,50,.5);
The last value 0.5 goes from 0 to 1 and is a opacity (or alpha) value for the color
Working example (see how the border transparency changes on hover): jsFiddle
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 7 years ago.
I have a div thats inside the container div. Now i want to make the inner-most-divs translucent to show the bodies background image. Or can this be done?
To make my question clearer, i used a green border for the div i want to target. I want this div to be slightly translucent so that the body tag's background is visible only in this div. Im thinking z-index should be used here but im not sure how
.forum-column{
border: 2px solid green;
/*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
background-size: cover;*/
background-color: rgb(35,35,35);
overflow: hidden;
height: 50px;
margin-bottom: 5px;
}
https://jsfiddle.net/jmann1622/hgm0gzs0/2/
I'm aware of opacity and rgba. But my problem is that my target(green border) is inside another div(orange border) which itself is inside another div(red border). Now i do not want any of the other divs to be transparent, only the green bordered div.And i want this (green bordered div) to be translucent so that the body tag's sky image can be seen. Sorry for the confusion, noob here
option-1: Use css property opacity:[0-1]
.forum-column{
border: 2px solid green;
/*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
background-size: cover;*/
background-color: rgb(35,35,35);
overflow: hidden;
opacity:0.4;
height: 50px;
margin-bottom: 5px;
}
option-2: Use rgba(red,green,blue,alpha) for background-color where alpha is from 0-1 and specifies the translucency
.forum-column{
border: 2px solid green;
/*background-image: url(http://kenstonlocal.org/kenston/wp-content/uploads/2014/12/css_code.jpg);
background-size: cover;*/
background-color: rgba(35,35,35,0.4);
overflow: hidden;
height: 50px;
margin-bottom: 5px;
}
Use rgba for most browsers..
rgba(35,35,35,.8) the last part is a number from 0-1 to indicate transparency level..
Just use rgba for background color.
.innerDiv {
background-color: rgba(35, 35, 35, .5);
}
The last value for a (alpha) can be between 0(100% transparent) to 1(100% opaque).
This will make the innermost div tranparent and the background divs will remain visible through it.
Hope it helps.
I have a problem wth setting two background, here it is:
rightCol {
margin: 0pt;
padding: 20px;
background: #AF7A38 url('../images/stain2.png') no-repeat scroll right top;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;
float: right;
width: 770px;
min-height: 810px;
height: auto ! important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; behavior: url(PIE.htc);
}
As you see it sets the background right top with some width and height with #AF7A38 color background for the rest of column, but what I want to do is to set another background instead of color for example setting this:
background: url('../images/background2.jpg') repeat scroll 0% 0%;
to fill the rest of column instead of color.
thanks
As far as I know, you can only use one background per element. CSS3 changes this, however, so if CSS3 is an option I would go that route. Check it out here.
To use two background images, place the backgrounds in two elements. You can use the html and body elements for this if you want them behind the entire page, or add an empty positioned secondary element to place them behind a sub-element.
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.