This question already has answers here:
Multiple Background Images issues in ie7/ie8
(2 answers)
Closed 8 years ago.
I have next div with 2 background images,
But images are not visible in IE 7 and 8.
<div class="media" style="background-image: url('/play_video.png'), url('/video.jpg')">
<span>Click to play video</span>
</div>
.media {
background-position: center, center;
background-repeat: no-repeat;
width:245px;
height:150px;
cursor:pointer;
text-align:left;
position:relative;
}
.media span {
bottom: 0;
left: 0;
color: black;
}
is it possible to fix ?
Nether IE7 nor 8 support multiple background images. Source
For the sake of the community, here's a workaround using positioning.
HTML
<div class="media-back">
<span>Click to play</span>
<div class="media-play">
</div>
</div>
CSS
.media-back {
position:relative;
height:300px;
width:300px;
background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQIbNF1wUNRvdk13BTlt_KZ6HrspnBIpMIOXAkbHsioDTCxMT5r);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.media-play {
position:relative;
background-image:url(http://tympanus.net/PausePlay/images/play.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
width:15%;
height:15%;
margin:0 auto;
top:50%;
transform:translateY(-50%);
}
span {
position:absolute;
bottom:0;
left:0;
cursor:pointer;
}
It's not finessed and I don't know what aesthetic you're going for, but you can fake the same effect using positioning.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is there a gap between my image and its containing box?
(6 answers)
Closed 4 years ago.
I have a simple absolute div and an image inside it.
I don't know why there is this strange small gap/empty space underneath the image. I used other images in the same div and it seems to be the same!
This is what I have:
.adHolder {
width:100%;
/*height: auto;*/
position:absolute;
bottom:0;
left:0;
/*border-top:solid 1px #fff;*/
padding:0;
margin:0;
z-index:1;
}
.adHolder img {
width:100%;
height:100% !important;
padding:0 !important;
margin:0 !important;
border:none;
}
<div class="adHolder">
<img src="http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg">
</div>
if you look at the bottom of the image, there is a small line (empty space) which I need to get rid of.
Any pointers would be appreciated.
add display:block to image
.adHolder {
width:100%;
/*height: auto;*/
position:absolute;
bottom:0;
left:0;
/*border-top:solid 1px #fff;*/
padding:0;
margin:0;
z-index:1;
}
.adHolder img {
width:100%;
height:100% !important;
padding:0 !important;
margin:0 !important;
border:none;
display: block;
}
<div class="adHolder"><img src="http://via.placeholder.com/350x150"></div>
Background acts as expected without transform:scale
after adding transform:scale value unwanted parallax effect appears: http://codepen.io/fekla/pen/VmqPZa (scroll down).
<div class="holder">
<div class="image"></div>
</div>
html,body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.holder {
width:100%;
height:100%;
background-color:black;
overflow: hidden;
}
.image {
width:100%;
height:100vh;
background-image: url(http://lorempixel.com/output/nature-q-c-884-338-5.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
transform: scale(1.25);
}
seems to be a known Webkit bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
P.S. also there seems to be little interest in actually fixing it
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
I am trying to overlay text with a white translucent background on an image when people mouse over that image. I found answers containing original type of the following code on here. Now I want to vertically align text to the middle of the image.
Is it possible?
HTML:
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>
CSS:
.image {
position:relative;
width:400px;
height:400px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: 'Hello';
color: #000000;
vertical-align: middle;
text-align: center;
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background: rgba(255,255,255,0.7);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
If the height of the image (or container) you are using is fixed, as in your example, then you can use a line-height method, as follows for the code in your example:
.image:after {
line-height: 400px;
}
Add that line to the .image:after selector, and it will achieve what you want.
JSFiddle Example
This is more sure and structured to clean spaces.
.image:after {
line-height: 400px;
margin: 0;
padding: 0;
}
This question already has answers here:
How to make an inverse transparent circle in CSS [duplicate]
(2 answers)
Transparent hollow or cut out circle
(7 answers)
Closed 8 years ago.
Is there a way to get this effect in CSS ?
I try to play with this css but it cuts only first layer.
div{
width:300px;
height:300px;
position:relative;
overflow:hidden;
}
div:before{
content:'';
position:absolute;
bottom:50%;
width:100%;
height:100%;
border-radius:100%;
box-shadow: 0px 300px 0px 300px #448CCB;
}
The simplest way is to use a transparent DIV with overflow hidden (the gray one)
than inside simply put a circle with box-shadow with really large spread.
html, body{height:100%;}
body{
background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50% / cover;
}
.hasCircle{
width:150px;
height:300px;
position:relative;
overflow:hidden;
float:left;
}
.hasCircle:after{
content:" ";
position:absolute;
left:0; right:0;
margin:100px auto;
width:100px;
height:100px;
border-radius:50%;
box-shadow: 0 0 0 1000px #444;
}
<div class="hasCircle"></div>
<div class="hasCircle"></div>
<div class="hasCircle"></div>
As you can see above I've used the :after pseudo element which might prevent some text in .hasCircle to be visible (due to the overlapping pseudo-element), but it's just to get an idea, you can do it using a real element like:
<div class="boxTransparentOverflow">
<div class="theTransparentCircleWithGraySpread"></div>
Some text
</div>
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).