I want to make a background image to be seen over div. Anything that I've tried with z-index didn't helped me. Image itself has not standard shape and glowing border. As image ends ideally "logo2" should imitate that "glowing" by box-shadow parameter. But anything I've tried "logo2" always over "logo" crosses the image. This is how I want it to be like site.com/logo2.png
.logo {
background: url(site.com/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 100%;
height: 50px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:relative;
z-index:10;
<div class="logo">
<div class="logo2"></div>
</div>
I guess this is what you want. You can adjust width of .logo2 accordingly
.logo {
background: url(http://homeworld.su/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 20%;
height: 40px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:absolute;
top:10px;
left:495px;
<div class="logo">
<div class="logo2"></div>
</div>
Related
I want to render a box on another box's border, like shown in this image:
Expected Output
I tried doing this using flexbox, but couldn't come up with any solution.
How can I approach this design? Any help would be appreciated!
This is a reproduction as close as possible to that picture you showed.
The positioning is obtained using position:relative for the card container and position:absolute for its inner parts.
.card{
position:relative;
width: 400px;
height: 200px;
border: solid 2px gray;
border-radius: 15px;
padding: 5px 5px 5px 5px;
text-align: center;
background: linear-gradient(white 50%, #F1FAFF 50%);
margin-top: 100px;
}
.inner{
border: solid 1px lightgray;
border-top: none;
height: 80%;
width: calc(100% - 20px);
box-shadow: 0px 2px 2px lightgray;
position: absolute;
bottom: 10px;
left: 10px;
background: white;
}
.label{
position: absolute;
top: -15px;
left: 25px;
background: #F5F5F5;
padding: 5px 10px;
font-family: sans-serif;
font-weight: 600;
border-radius: 5px;
}
<div class="card">
<div class="label">13 Mar - 12 Apr</div>
<div class="inner">
</div>
</div>
That can be achieved using legend. If you want custom style, then use postiion: relative on parent div (what you call the box with border), use position: absolute on the child div and adjust top, left, margins or translate values.
You can use two div do to it.
first div with border
second div for shadow box
.outer{
border:2px solid #333;
width:200px;
height:150px;
border-radius:20px;
}
.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}
<div class="outer">
<div class="inner">
</div>
</div>
I am trying to make a div box with an background image for my website.
The div box itself works perfectly but there is no background image in it.
Anyone have an idea?
.box {
width: 600px;
height: 400px;
padding: 20px;
box-shadow: 0px 0px 10px 2px grey;
margin: 100px auto;
border: 10px solid red;
background-image: url(/img/header.jpg);
background-size: cover;
}
Try pointing to the absolute path:
.box {
width: 600px;
height: 400px;
padding: 20px;
box-shadow: 0px 0px 10px 2px grey;
margin: 100px auto;
border: 10px solid red;
background-image: url("http://www.website.com/img/header.jpg");
background-size: cover;
}
JSFIDDLE
I got a textfield that expands when I start typing text, and indicates that it is OK since it has text - otherwise it's red, indicating it has not been filled out. I need left padding on this in all states, but when I write too much text and the text starts scrolling, the padding is ignored. Is there any way to fix this? I made a fiddle: https://jsfiddle.net/o1r9dp2L/1/
<div class="container"><div contentEditable=true id="test" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="Placeholder"></div></div>
CSS:
.container{
overflow: hidden;
margin:0px;
height:24px;
}
#test:not([value=""]) {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:0px;
padding-left:36px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
/*background-repeat: repeat-x 100% 100%;*/
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#000;
outline:0;
}
#test {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
#test:empty {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
The reason that there is a blank space to the left of the field is that I also have a checkbox there that can be used instead, that expands to cover the textfield and looks exactly the same. So either you fill in information, or you check the box to the left.
One way is to make the tick icon to have same white background color, so that it covers any overflowed text on the left. I also significantly reduced the size of the style code.
jsFiddle
body {
background: #fff;
}
.container {
position: relative;
margin: 20px 0;
}
.input {
cursor: text;
width: 100px;
display: inline-block;
vertical-align: top;
overflow: auto;
font-family: Quicksand, sans-serif;
font-size: 14px;
line-height: normal;
white-space: nowrap;
outline: 0;
border-radius: 3px;
border: 1px solid #999;
padding: 4px 10px;
box-sizing: border-box;
overflow: hidden;
}
.input:not(:empty) {
color: #000;
width: 130px;
right: 0;
padding-left: 24px;
}
.input:not(:empty):before {
content: "";
position: absolute;
left: 1px;
top: 1px;
bottom: 1px;
width: 22px;
border-radius: 3px;
background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;
}
.input:empty {
background: pink;
color: red;
position: relative;
right: -24px;
}
.input:empty:before {
content: attr(data-placeholder);
}
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
Edit: The below is meant to show you that the padding is not being overwritten on overflow. What is happening is that the padding is increasing the width of the element and the background image is just that - a background. To get around this, you can use a psuedo element to allow that background image to go over text. The text is still there, but it is underneath the image.
If I were you, I would check out the following tutorial on bootstrap's input groups. It may be helpful for you to see how bootstrap does this. You can then use JavaScript to change the image or HTML structure based on the input's state.
The problem is that the checkmark image was being used as a background image within the div. There is no way to make a background image go over text.
However, you can use a psuedo element for this.
jsfiddle
I've edited the image in Photoshop to have a transparent background, and then converted to a base64 URL (so I didn't have to host the image).
The psuedo element uses two background images, the reddish background underneath the green checkmark. This psuedo element is positioned absolutely and therefore goes over the text as desired.
#test:not([value=""]):before {
content: '';
position: fixed;
top: 13px;
left: 9px;
display: inline-block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAABvElEQVQ4jZ2UQUgbQRSGPxMkG1QapaKVXAwVFCQKkqCIi4cGPEixWBFEpELAUqQX9VDEXFQQcUEkekoPxVNBsZQiSopQzUENoqJFxNaStBAPqe7FuBDDeBKiZKPsD+8w88//zYM3TA46EkLoWXcU2Z3vf//nV08QyTVT92FQ96AQ4uGKLne8XPRtWxd9Qv5x+lsIgelRbWRS6q9jfm9TDoILUy0zjeVdgHHg2c6X7r4k/SAx6Xw1UmNmyzjwcrdB+RcvB3AWtsW8DpRbyxBwf2elfRbewHMm3VW9ElwZB6phORDX7ACt9paQnMdquq0PTCUtqnpVpKWwpm9HjkKej9CJqZJBZ/Hw/Zgu0L88NlW2NvG/NrhxEUlRAYB24ArE1CKAbnvrV7fE+qOBTU9sagkQTXy39KyfrGhgVQ9DHgXeYarEW12gZMrpAmvktxOfCyUFIHyx4PAfxxIb8bNxAE9JczhTd1mBYL10y17lkwU/aPh+BhhKAJTirXo2rZfKPmVzcayj7sW31xCEa6IA+fV4bCwZAwKUNq2O2p+GbpcDZdVz6e/uvnL0jLu/TdKiqVqeZpawFeSeZ7v/BqqSqeSPBBXnAAAAAElFTkSuQmCC'), url(http://i65.tinypic.com/1z3xah4.png);
background-repeat: no-repeat, repeat-x;
height: 15px;
width: 25px;
}
I've also removed the other instance of the background image.
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
Update:
To handle the case where the text is then cleared, I've added the following:
#test:empty:before {
content: '';
background-image: none;
width: 0;
position: static;
}
All
this is my first stack overflow post, thanks in advance for any help
I am putting together a page with content and divs with image background, when I try to float two divs on the right one on top of each other, having trouble flow content to the left, I have used clear so one div is on top of the other one on the right, but the content I am trying to put on the left is align with the second image where the clear was applied then there is a big gap for the first div, any suggestions?
I have enclosed code here
.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}
.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}
HTML
<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>
Try this, I believe it's what you asked for:
HTML:
<div style="float: left;">
<div>Content.........</div>
</div>
<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>
CSS:
.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}
.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}
JsFiddle: https://jsfiddle.net/nmzwLn2q/1/
I'm working on an image grid and want to create an effect similar to this http://instagram.com/instagram/ (the images in the squares on the lower part of the page where the border expands. This is what I have so far:
HTML:
<div id="page-title"> </div>
<div id="wrapper" style="min-height:300px;">
<!--start: Container -->
<div class="container" style="margin-left:100px;">
<div style="position: absolute; width:200px; border: 1px solid black; height:200px;">
<div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids">
</div>
</div>
</div>
</div>
</div>
CSS:
.polaroids {
background: #fff;
float: left;
width: 158px;
height:158px;
padding: 5px 5px 5px;
text-align: center;
text-decoration: none;
color: #333;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transition: all .2s ease-in-out;
border: 4px solid white;
background-color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin:0 auto !important;
}
.polaroids:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
z-index: 5; border-top: 10px solid white;
border-bottom: 10px solid white;
border-left: 8px solid white;
border-right: 8px solid white;
}
The middle div does not seem to want to centre. Where am I going wrong? http://jsfiddle.net/b5XDK/
for horizontal center use margin:0 auto; on the child element and remove the float:left;
http://jsfiddle.net/roine/b5XDK/10/
remove this
.polaroids { float:left }
remove your float:left of .polaroids