I've researched this and am unable to understand why my padding won't work for this div. I won't the dashed border to be evenly distributed around the image. (see below). Here is my CSS:
#jspsych-tree-stim-bottom-left, #jspsych-tree-stim-bottom-right {
position: relative;
display: inline-block;
margin-top: 30px;
margin-left: 55px;
margin-right: 55px;
margin-bottom: 15px;
width: 200px;
height: 200px;
border-width: 4px;
border-style:dashed;
border-color: rgba(0,0,0,0);
padding: 20px;
background-repeat: no-repeat;
vertical-align: top;
background-position: center bottom;
}
Example of border problem:
After looking into it further myself, I've convinced myself that the bottom in
background-position: center bottom;
is pulling the image to the bottom of its container. Take out the bottom if you want the margin and padding to work there
background-position: center;
Related
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
I've got this working nicely on objects with a solid background colour, by applying multiple box-shadows:
jsFiddle
html:
<div></div>
css:
div{width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: rgb(0,150,0);
box-shadow: -15px 0 12px rgba(0,150,0,0.2)
, -11px 0 10px rgba(0,150,0,0.4)
, -8px 0 8px rgba(0,150,0,0.6)
, -6px 0 6px rgba(0,150,0,0.8)}
This isn't ideal as you get shadow bleeding up and down from the element instead of just to the left, but it kinda does the job.
But what I really want is for it to work nicely with a background image, e.g. in this jsFiddle I'd like the colours on the edge of the div (or the edge of the background image at least) to be stretched out.
How can I do that? Can I?
Thank you
You could add a ::before then duplicate your element and blur it.
div{
position: relative;
width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
}
div::before {
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
position: absolute;
width: 55px;
height: 55px;
overflow: hidden;
z-index: -1;
filter: blur(5px);
content: "";
border-radius: 100%;
}
<div></div>
I have a div in CSS which is to show a piece of tape.
The problem is that the background in the middle is overlapping and appearing on both ends of the tape, so the transparency that should be at the ends of the tape div is not there.
Here is my CSS.
.tape {
background-image: url(../graphics/tapeleft.png), url(../graphics/taperight.png), url(../graphics/tapemiddle.png);
background-repeat: no-repeat, no-repeat, repeat;
background-position: left, right, center;
font-size: 1.05em;
height:32px;
min-width:75px;
line-height:32px;
text-align:center;
border:0 solid #000000;
margin:0;
padding: 0;
display:inline-block;
color: black;
}
.tape span { padding-left:16px; padding-right:16px; }
How do I stop the middle background from appearing beneath the background on the ends, while having the three backgrounds in one div? I have tried using background-clip and background-origin but I can't get it to work.
You need to use a pseudo element for the repeated image, as you can't set both a start and an end offset for it.
body {
background-color: magenta;
}
.tape {
position: relative;
background-image: url('http://i.imgur.com/vVnpGzx.png'),
url('http://i.imgur.com/Po3AT0u.png');
background-repeat: no-repeat;
background-position: left, right;
font-size: 1.05em;
height: 32px;
min-width: 75px;
line-height: 32px;
text-align: center;
display: inline-block;
color: black;
}
.tape::before {
content: '';
position: absolute;
top: 0;
left: 8px; /* start offset */
right: 8px; /* end offset */
height: 100%;
background: url('http://i.imgur.com/7aGUUgo.png') center;
z-index: -1
}
.tape span {
padding-left: 16px;
padding-right: 16px;
}
<div class="tape">
<span>$60 annual revenue</span>
</div>
This is the look I'm trying to achieve:
I'm trying to position the text above the background image OR position the background image below the text, AND have the image and the text be clickable as it is a button.
But I can't get the text at the top of the button. vertical-align doesn't have any effect it seems.
Is it possible to do it with a single button element?
button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
line-height: 100px;
background-position: 50% 58px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
Remove your line-height and add padding-bottom to offset the text:
button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
background-position: 50% 58px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
padding-bottom: 125px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
Mine is a modification of James Montagne's. I removed height (which should be a factor of content + (padding/image) and positioned the button to appear at the bottom of the element.
The way this works in CSS is first, it outputs all text, giving about 40px (Y) of content. Then, it adds 96px of padding below - enough extra space to contain the background image. Finally, it uses background-position to decide where to put the background image; at the bottom. This reduces the coupling of each "position variable", which might make it easier to change.
button {
width: 96px;
border: none;
border-radius: 0px;
background-position: 50% bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
padding-bottom: 96px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
The best I could get:
button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
background-position: 10% 140%;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
Added some background positioning background-position: 10% 140%; - 10% for horizontal and 140% for vertical positioning.
I wanna place a profile picture that has a width of 200px and an unknown height, inside a div container. The div is 150px x 150px. The img should be centered horizontal with the bleed hidden on each side. I cannot get this to work, the unknown height is messing it up, since the way the img width will appear is depending on the height. - A landscape img will get a higher width to fill out the height difference and keep the img in proportion. If it's a portrait image, the width should be 150px as the div...
Watch image: http://s18.postimage.org/52hfcc5h3/Sk_rmavbild_2012_06_26_kl_19_12_49.png
#profilePicture {
display: block;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#profilePicture img {
min-width: 150px;
min-height: 150px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
position:absolute;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Have you considered using background-images? It would make it much easier.
.img {
overflow: hidden;
background-image: url('/xyz.jpg');
background-size: cover;
background-position: center;
}
Here's The fiddle -> http://jsfiddle.net/haNj3/1/
I think what you want to do is this.
.main{
width:150px;
margin: 0 auto;
overflow:visible;
position: relative;
height: 200px;
outline: 1px solid blue;
}
img.absolute{
width: 200px;
left: 50%;
margin-left: -100px;
margin-top: 0;
position:relative;
outline: 1px solid red;
}
I think there is no need to use absolute positioning in this case.