I've the follow html with CSS
.image_with_loader_container {
position: relative;
width: 100%;
padding-bottom: 139.34426%;
background: #dbdbdb;
}
.image_with_loader_container img {
border-radius: 4.75%/3.5%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="image_with_loader_container">
<img src="..." />
</div>
In this video (Chrome 83) you can see that the border-radius doesn't work very well. You can check this behavior live at https://mtgprint.cardtrader.com .
Any idea to solve this issue?
You are adding rounded corners to the image, but the container with background: #dbdbdb; is still a rectangle. (You can see it better if you set your radius to a large value, like 100%). Try either removing that background, or adding the same border-radius to .image_with_loader_container.
Related
I have a link and an image. I would like to use css absolute positioning to position the link on the image but if i use css absolute positioning then the link will not be properly positioned if the user is using a bigger monitor or a smaller monitor. How could I make it so that it would work on all monitors and be positioned correctly.
Option one is really daft, but just move the link so it wraps around the image?
<img src="http://placehold.it/350x150">
The other alternative (if you can't do that), is to make sure they are in the same parent element that is position: relative;:
#container {
position:relative;
width:350px;
height:150px;
}
#container a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="container">
<img src="http://placehold.it/350x150" />
</div>
Make the image a background image, reformat as below, if possible. (this is a better practice)
Is there a reason it MUST be a foreground image? Let me know and I might have a suggestion specific to that!
#divwithimage {
background: url("../images/sweet.jpg");
background-repeat: no-repeat;
width: 500px;
height: 500px;
position: relative; // as this will act as parent
}
button {
position: absolute; // absolute to container above
left: 0;
top: 0;
width: 200px;
height: 40px;
background: pink;
}
Similar to these, but with a separate border. I asked this question earlier, but didn't realize there were other methods besides using linear gradients.
Examples: http://i.imgur.com/TqVR67J.png
It's not pure CSS (and probably not exactly what you're looking for), but you could just do a larger element first that just forms the border, and then have a smaller sibling element with offset afterwards:
<div id="background"></div>
<div id="foreground"></div>
and then the css:
#background{
position: absolute;
}
#foreground{
position: relative;
top: 5px;
left: 5px;
}
(Obviously, you would have to add all of the styling and extra tags for the beveling.)
Take a look at this fiddle. This might gave you an idea of how to create it with css.
Beveled border with css
HTML
<div class='box'>
<img src="http://placehold.it/350x150" />
<img class='cart' src="http://www.rotweinelang.at/themes/wein/img/elements/smallShoppingCartIcon.png" />
</div>
CSS
.box {
width: 350px;
position: relative;
}
.box::after {
content: "";
position: absolute;
top: 0;
right: -2px;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent #fff transparent transparent;
}
.cart {
position: absolute;
top: 0;
right: -4px;
z-index: 1;
}
I have a few images generated dynamicaly :
<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>
And I would like them to have rounded corner so that in my CSS I put :
.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
behavior: url(css/PIE.php);
}
I can see the rounded corners in Firefox, Chrome and IE9 but it's not working in IE8. The PIE thing is already working with other elements in IE8.
Does anyone know what it could be ?
Thank you very much
The only way I know of making rounded corners work in IE8 and below is with code like this:
<div class="image">
<span class="tl"></span>
<span class="tr"></span>
<span class="br"></span>
<span class="bl"></span>
</div>
and then with CSS like this:
.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }
where the background images are all images of rounded corners corresponding to that corner, e.g. the bottom right hand corner background image might look like this:
and so one (hope that makes sense)
There might be nicer ways to do this, as the above method is a bit laborious, and not particularly clean.
Saying that, I doubt any ways of getting rounded corners to work in IE8 and below will be particularly "clean". I usually just leave IE8 and below without rounded corners, not that many people even use 7 and 8 anymore in comparison to other browsers.
EDIT:
If I were you I'd steer well clear of code like this "behavior: url(css/PIE.php);" IE behaviours are not supported in other browsers, I think even Microsoft gave up on them.
Finaly I made it work with CSS3 PIE. Rounded corners appear appear in IE7, IE8 and all other browsers. It was a coding mistake, sorry.
Basically, I am trying to put overlap corners behind the #page_container on my site, so that it looks like the image is overlapping the page.
Live example: http://jsfiddle.net/xBwQp/15/
HTML :
<div id="page_container">
<div id="banner_wrapper">
<img id="banner_image" src="http://placehold.it/350x150" />
<div class="triangle-l"></div>
<div class="triangle-r"></div>
</div>
</div>
CSS :
#page_container {
background: red;
width: 400px;
position: relative;
z-index: 10;
}
#banner_wrapper {
position: relative;
}
#banner_image {
position: relative;
}
.triangle-l {
border-color: transparent green transparent transparent;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
.triangle-r {
border-color: transparent transparent transparent blue;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
You can see that the triangles, .triangle-l and .triangle-r, clearly have a lower z-index:5 than the #page_container z-index:10 but they still appear above the #page_container.
I have been able to accomplish my desired result by setting .triangle-l and .triangle-r to z-index:-1 however this only works in FF, Opera, and Webkit. No IE support.
I believe it has to do with the stacking context. However, I am unsure how to accomplish the desired result with cross-browser compatibility.
You are absolutely right - it is about the stacking context.
Whenever you put z-index on an element you create a new context, so because the triangles are descendants of the #page_container they are going to belong to the stacking context of the #page_container and no matter what z-index number you choose for the triangles, they only have meaning inside this context, and you will not be able to move them backwards behind this container.
Read in detail here: https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context
Possible solutions are;
move the elements out of the container in the html structure (and
then position them where you want with css)
remove the z-index from the container and set the triangles to z-index -1 to move them beneath the document itself
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.