Does anyone know how to make this?
I have a product image and I need same image "fade" on the background.
Image example
This is the spotify example image.
Use this HTML:
<body>
<div id="all">
<img src="your-image.jpg" alt="image" height="200" width="200">
</div>
</body>
With this CSS:
body{
padding: 0;
margin: 0;
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#all{
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
}
Now, all the new HTML MUST go inside the <div> with id #all.
Related
JSfiddle demonstrates the problem:
https://jsfiddle.net/qjtbchpu/11/
<div id="container">
<article>
blah
</article>
<article>
blah
</article>
</div>
#container::before {
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
background: url(https://imgur.com/qYUPJgv.jpg);
position: fixed;
}
article {
position: relative;
height: 500px;
background: rgba(255, 255, 255, .75);
margin: 4em;
padding: 2em;
border: 1px solid black
}
This works perfectly in all major browsers that I've tried, apart from IE11 where the photo only appears if I use position:absolute which doesn't give me the effect I desire.
Any known solutions or workarounds? Thank you
IE11 simply won't load huge images there, guess at the time of pseudo element creation, they are not in cache. Your code works just fine with some simple/small image, but for larger image (that takes time to load) you can use this trick:
#container::before {
left: 0;
right: 0;
bottom: 0;
top: 0;
content: url(https://imgur.com/qYUPJgv.jpg);
background: url(https://imgur.com/qYUPJgv.jpg);
background-size: cover;
text-indent: -9999px;
overflow: hidden;
position: fixed;
}
article {
position: relative;
height: 500px;
background: rgba(255, 255, 255, .75);
margin: 4em;
padding: 2em;
border: 1px solid black
}
<div id="container">
<article>
blah
</article>
<article>
blah
</article>
</div>
Tested and it works fine, also on JSFiddle.
Key line, which force browser to load the image is:
content: url(https://imgur.com/qYUPJgv.jpg);
Received a two column layout design for a website. Each column has a transparent background that, combined, forms a curved cut-out at the top.
I need the columns to grow with content, however this distorts the background image when set on background-size: cover (Matching things up in order to use repeat-y won't work either). Is there a good way to accomplish this, or a way to tell him absolutely not?
.middle-left-container {
float: left;
min-height: 500px;
position: relative;
left: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png');
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
body:not(.home) .middle-left-container {
top: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png');
}
.middle-right-container {
float: left;
min-height: 500px;
position: relative;
top: 0;
right: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 80%;
}
body:not(.home) .middle-right-container {
background-image: none;
background-color: #fff;
}
Thanks,
Matt
Don't put the curved bg image on the <body>, put it on a fixed-width container, then anchor the bg-image position.
.container {
width:900px;
margin:0 auto;
background-position: top center;
...
}
Then inside that container, put each of your column containers. Something like:
<div class="container">
<div class="sidebar-nav"> ... </div>
<div class="middle-left-container"> ... </div>
<div class="middle-right-container"> ... </div>
</div>
I am trying to create a simple responsive splash page with a background image and a div on top.
I have managed to get the responsive background image. This works well.
Now I am having issue placing a div on top of this background and making sure it follows the resizing properly.
I have set percentage margins for this div but it's not keeping the percentages, also if I make the window too small then the div disappears completely.
How can I fix this problem?
Thanks a lot for your help.
Guillaume
The address:
http://b-tees.net/testsplash/
My html:
<div id="bg">
<img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>
My CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}
My suggestion is to use like this : Demo
instead of the method you are using atpresent
CSS:
html, body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
}
.bg_img {
background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
#selector {
display:block;
vertical-align:middle;
text-align:center;
margin:0 auto;
width:50%;
}
HTML:
<div class="bg_img">
<div id="selector">Test test test..
</div>
</div>
My site is up at avidest.com/test. I am trying to make the background image go from the top of the page down to the "our online services" section. For some reason, it is ending early and there is a stretch of page where the black body background is visible. I don't want this black section to show. here is the css:
.header {
/*background: #f0f7f7 url(images/header_bg.gif) top repeat-x;*/
background: transparent;
padding: 0;
margin: 0 auto;
height: 70px;
}
.block_header {
margin: 0 auto;
width: 980px;
padding: 0;
border: none;
}
.logo {
float: left;
padding: 0;
margin: 0;
width: 242px;
}
.uppercontain {
background: url(images/slider_bg.gif) no-repeat;
background-size: 100%;
min-width: 1050px;
min-height: 700px;
}
.slider {
/* background:url(images/slider_bg.gif) no-repeat; background-size: 100%; min-width: 1050px; */
background: transparent;
margin: 0 auto;
padding: 0;
height: 100%;
}
.slider .gallery {
margin: 0 auto;
width: 1050px;
height: 383px;
padding: 0;
} /*width was 880px*/
.slider .formbox {
float: right;
}
and here is how it appears on the page:
<body bgcolor="#000000">
<div class="main">
<div class="uppercontain">
<div class="header">
<div class="block_header">
<div class="logo"><img src="images/logo.gif" width="242" height="94" border="0" alt="logo" /></div>
</div>
</div>
<div class="slider">
<div class="gallery">
<div class="form box"> Form is here </div>
</div>
</div>
</div>
Rest of content
</div>
CSS3 adds the background-size property : http://www.w3schools.com/cssref/css3_pr_background-size.asp which you can use with IE9 and above http://caniuse.com/#feat=background-img-opts
Otherwise your options are to use a bigger background image OR use a div with image behind your content
simple. That fixes all your needs. Although I'm not sure if that works fine in IE but it definitely does in Firefox, Chrome and Safari
background: url('image_Url_here') no-repeat scroll center top/cover transparent;
Include fallback then css3 to be backwards compatible with browsers that don't support css3 background-size syntax.
background: url('image_Url_here') no-repeat scroll center center transparent;
background: url('image_Url_here') no-repeat scroll center top/cover transparent;
Tested on
firefox v12.0 (stuck on this version cuz mozilla dropped support for WinXP SP1)
Chrome v25.0(.1364 Ubuntu 12.04)
I'm new to the CSS thing; learned it yesterday (really) and I did some templates since then, I'm evolving quite fast, but there is one thing I can't quite get. How do you make a drop shadow around parts of the template without destroing the layout or having to deal with new problems.
I have created a CSS/HTML template that has a glass effect arround it and I was able to make it work using floats and absolute positioning within a relative div called wrapper but it doesn't work on IE7 and IE6 but works on all FF versions.
My question is:
How do I create a drop-shadow arround the template like artisteer does?
Hi I gone ahead and made that self expandable, not sure it's gonna work on IE7 tho, I have windows 7 so I have IE8 as default and can't really test it. All i have to say is that I had no idea that setting "bottom 0;" "left 0;" would make the div stick to the bottom left and for that I can't thank you enough it's like a lamp just turn on on my brain and now I can do so much more, well still learning...
<style type="text/css">
#box {
position: relative;
width: 100px;
}
.corner {
background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.tl { top: 0; left: 0; background-position: 0 0; }
.tr { top: 0; right: 0; background-position: -22px 0; }
.bl { bottom: 0; left: 0; background-position: 0 -22px; }
.br { bottom: 0; right: 0; background-position: -22px -22px; }
.content {padding:10px;}
</style>
<div id="box">
<div class="corner tl"><!-- --></div>
<div class="corner tr"><!-- --></div>
<div class="corner bl"><!-- --></div>
<div class="corner br"><!-- --></div>
<div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div>
</div>
hihi they use tables :)
For the way I think you want it to work in IE you should define the height of the outer box like this:
<div id="box">
<div class="corner tl"><!-- --></div>
<div class="corner tr"><!-- --></div>
<div class="corner bl"><!-- --></div>
<div class="corner br"><!-- --></div>
</div>
#box {
height: 100px;
position: relative;
width: 100px;
}
.corner {
background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.tl { top: 0; left: 0; background-position: 0 0; }
.tr { top: 0; right: 0; background-position: -22px 0; }
.bl { bottom: 0; left: 0; background-position: 0 -22px; }
.br { bottom: 0; right: 0; background-position: -22px -22px; }