I have a logo image that is refusing to display in Safari 4/5. Can anyone shed any light on this?
This is the CSS / (uncompiled less) -
background: url("../img/logos%20and%20icons/logoLrg.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);
#media(max-width:400px){
background: url("../img/logos%20and%20icons/logoSML.png") no-repeat scroll 0 right / contain rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;
try without spaces
background: url("../img/logos and icons/logoLrg.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);
#media(max-width:400px){
background: url("../img/logos and icons/logoSML.png") no-repeat scroll 0 right / contain rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;
You don't have to use url encoding to set a path for a background image in a style sheet. It seems to me that if you replace %20 by a + sign you probably solve that issue. I'll come back with more information about it though.
Related
I'm making a Material Design web app, and I made it so that the drawer is only one element using a :before pseudo-element to make the scrim (to darken the background and bring the drawer to prominence).
#app-bar-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 350px;
max-width: 85%;
background: #fff;
z-index: 1200;
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
opacity: 0;
pointer-events: none;
transform: translateX(-110%);
transition: opacity .1s, transform .3s;
}
#app-bar-drawer.in {
opacity: 1;
pointer-events: all;
transform: translateX(0%);
}
#app-bar-drawer:before {
background: rgba(0, 0, 0, 0.6);
position: absolute;
width: 10000%;
transform: translateX(350px);
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
z-index: 700;
}
#media screen and (max-width: 400px) {
#app-bar-drawer:before {
transform: translateX(350px); /* this is what I can't figure out */
}
}
On larger phones, tablets, desktops, etc this works fine:
As you can see, the scrim is positioned at the edge of the drawer and covers the content neatly. However, with smaller devices, it moves too far and looks like this:
In this one, the scrim is at the far right edge of the screen, as the transform: translateX(350px) is pushing it too far. I've tried changing it to use a percentage, but percentages are of the :before pseudo-element, not the parent. When I tried using a pixel measure like 200px, it would either go too far (and wouldn't cover the content) or too close (and cover the drawer).
SUMMARY
I can't use either percentages or pixel measures. I'd rather do this without JS, but if necessary I'll do it. Is this possible? It needs to be a single element.
An alternative approach would be to toggle the psueodoelement on the body when the menu is toggled. You can set it to the full width of the viewport using position: fixed and coordinates, which avoids dealing with transformations.
Ensure the z-index of the menu is higher than the psuedoelement.
Ok so I need to position text overtop of a slider and have a darkend background behind the text so that it's readable. Simply using text-align: center doesn't work in this instance as the darkened background takes up the entire page width
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
.wrapper{
position: relative;
width: 100%;
text-align: center;
}
So the only solution to this that I could think of was to position it using the left and right css properties. So in this case I put left and right to 40% each.
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%;
color: red;
margin: auto;
left: 40%;
right: 40%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
The problem though is that this has to be a dynamic page and work for all of the different screen sizes. Using this method I would have to code in the values for all the screen sizes I can come up with ... just seems like it's not an eloquent solution to me. Plus I'm also running into the issue now where the absolute text overlaps other elements if the user increases page zoom.
I'm still a noob so I'm hoping there's a better way to do this?
Thanks Guys!
Add the text inside your h4 in a span:
<h4><span class=text>SOME TEXT</span></h4>
And then:
.text{
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
And you can remove the padding from h4 so h4 would be:
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
Here is a fixed version of your pen
I have an image saved in my assets folder, it's a banner image and i'm displaying some text over it. I was using a linear gradient to make the text more readable and it looked nice, for some reason this just stopped working. (I didn't even change anything)
this is what I think SHOULD work:
background-image: url('banner_img.jpg'), ( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )
but Rails will only load the image if I use:
background: image-url('banner_img.jpg')
adding a linear gradient to this does not work.
Any ideas?
thanks
Here is my code for you.
HTML
<div class='foo'></div>
CSS
.foo {
position: relative;
background-image: url('http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg');
width: 400px;
height: 200px;
}
.foo:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, red, orange);
mix-blend-mode: color;
}
Look codepan.
I'm working with Angular and trying to bind an image to a div background.
The background need to be darker from the original image so text can be include later :
The problem Is - The image does not show properly inside the boundaries of the div; some parts of the image are missing.
.PictureCover {
background-size: cover;
margin: 10px;
width: 70px;
height: 100px;
float: left;
}
<div class="PictureCover" style="background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>
The url to the image from the example is temporary and will be replaced with a binding to a image from object in angular so inculding 'background-image' inside the PictureCover css class is not an option.
Thanks.
In .PictureCover, you could add:
background-position: center center;
.PictureCover {
background-size: cover;
margin: 10px;
width: 70px;
height: 100px;
float: left;
background-position: center center;
}
<div class="PictureCover" style="background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>
I can't center my modal in twitter-bootstrap with various sizes. You can see live example here and here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <center>
.modal:
.modal {
position: fixed;
top: 10%;
z-index: 1050;
width: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-body:
.modal-body {
margin: 0 auto 0 auto;
position: relative;
padding: 15px;
overflow-y: auto;
}
I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (one).
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
A solution that works regardless of the child element size (in this case the modal). Can also be used to center vertically.
.centered {
left: 50%;
transform: translateX(-50%);
}
Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its own width.
Edit: To center vertically
.centered {
top: 50%;
transform: translateY(-50%);
}
Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.
It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):
CSS:
.modal { left: 50%; }
jQuery:
$('.modal').each(function(){
var modalWidth = $(this).width(),
modalMargin = '-' + (modalWidth/2) + 'px!important';
$(this).css('margin-left',modalMargin);
});
Alternatively it is possible with just CSS:
.modal {
width: 100%;
left: 0;
background-color: transparent; }
.modal-body {
display: inline-block;
background-color: #FFF; }
.modal img { min-width: none!important; }
Alternative to #Coop's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.
.modal {
left:50%;
width:444px;
margin-left:-222px;
}
In your current code, there is nothing that will allow the modal to center.
You can use jquery to reproduce this behaivor:
left: 50%;
width: 560px;
margin-left: -280px;
Calculating the width of the div and asign css
$(document).ready(function () {
var modalWidth = $('#myModal').width();
$('#myModal').css("left", "50%");
$('#myModal').css("width", modalWidth);
$('#myModal').css("margin", (modalWidth/2)*-1);
});
.modal-dialog
{
padding-top: 15%;
}