I have a website with a large background image. Now I want to add circle buttons/links that also have background images.
It renders fine in Chrome and IE, but Firefox shows an ugly box with the same background-color that the <body> has.
The problem seems to appear as soon as you combine background-attachment: fixed; on the outer container with border-radius on the circle button.
I suppose this is a Firefox bug. Anyone has a workaround for this?
P.S.: If I run it here via "Run code snippet", it renders correctly in Firefox! Why is that?!
Chrome/IE (both circles are correct):
Firefox (second circle, where the pink box has background-attachment: fixed;, is broken):
body {
background-color: gray;
}
#wrapper1 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
margin-bottom: 40px;
}
#wrapper2 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
background-attachment: fixed; /* PROBLEM */
}
.box {
display: block;
background-image: url("https://d2d00szk9na1qq.cloudfront.net/Product/ac6714d6-578e-42d4-b81f-aaf7a7e5d580/Images/Large_CV-174.jpg");
background-attachment: fixed;
border-radius: 50%; /* PROBLEM */
width: 50px;
height: 50px;
}
<body>
<div id="wrapper1">
<div class="box"></div>
</div>
<div id="wrapper2">
<div class="box"></div>
</div>
</body>
Related
I'm trying to make background image not moving on scroll with background-attachment: fixed. But this only works in Chrome and IE11. Id does not work in Firefox and Edge. Could someone tell me what I'm doing wrong because this should be pretty basic thing to work. Also i have tried to put another div inside the .header-homepage with position: fixed and full width and height but that is also not working in Firefox or edge and it also breaks everything in chrome for some reasons. Same thing for pseudo element on .header-homepage.
css
html {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
background: #000;
}
.header-homepage {
background-image: url("https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG");
background-repeat: no-repeat;
background-position: bottom;
background-attachment: fixed;
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
html
<!--header-->
<header class="header-homepage">
<!--intro-->
<div class="header-homepage__intro">
<h1>
Text
</h1>
<div class="header-homepage__intro__description">
Text text text
</div>
</div>
<!--end intro-->
</header>
<!--end header-->
Demo: http://codepen.io/riogrande/pen/LxeVbR
Hi I have an image which should be background image I have written a div and inside div I maintained some style for it and its working fine in Chrome and mozilla firefox , but its not working in IE8+ versions. below is the div that I used in my html.Do someone please respond to this.
<div style= "background:url(../portal/images/AWI_logo.png) no-repeat; background-size:100% 100%;">
You can use background-size: cover;
<h2>background-size: cover;</h2>
<div id="cover"></div>
div {
width: 900px;
height: 400px;
border: 1px solid black;
margin-bottom: 1em;
background-image: url(img.jpg);
background-repeat: no-repeat;
}
#cover { background-size: cover; }
see sample here you can learn more from csstricks here
I've found a similar question here but with no answer, yet I can't find an alternative as a solution.
I have the following code and it works perfectly on Mac and Windows, however I can't figure out why on Android (either Chrome or Firefox) the background does not get updated when the user is scrolling down, it produces the space of about 1/5 of the screen at the bottom while scrolling down.
The background image gets updated after you release the touch.
html{
background-image:url(example.jpg);
background-position:fixed;
background-size:100% 100%;
}
Specify a height for your html and body, i.e.
html {
width: 100%;
height: 100%;
}
And
body {
height: 100%;
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
And add a div that will wrap everything inside body, i.e.
<body>
<div id="wrapmeup">
....your content....
</div>
</body>
And finally add this to your css:
#wrapmeup {
height: 100%;
width: 100%;
background-image: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.
I'm making an application in which I need to have a login box whose background is transparent, so that the background image of the <body> is displayed as well. Like in LinkedIn:
LinkedIn has a blurry background for this login box. How in CSS can I achieve this?
Here's what I've tried, but it doesn't work.
background-color:ffffff;
opacity:0.4
margin-left:200px;
Can anyone send me in a good direction?
Have you tried to use the filter (for now working only in webkit) ?
Check this: http://davidwalsh.name/css-filters
(I don't have the time to try, but you might have to put two div, one with the image and the filter and another with the form)
Sorry for my english :)
EDIT:
I've made this pen: http://codepen.io/anon/pen/gEmrD
HTML:
<div class="container">
<div class="content">
</div>
<div class="form">
<p>This is you form (with a bit of immagination :P )</p>
</div>
</div>
CSS:
.container {
width: 1000px;
height: 100%;
min-height: 500px;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 50%;
display: block;
}
.content {
width: 100%;
height: 300px;
margin: 0;
background-image: url('http://www.gordonviaggi.it/files/wedding_packets/in_giro_per_san_francisco.jpeg');
background-size: 1000px;
background-position: 50% 0;
filter: blur(3px);
-webkit-filter: blur(3px);
display: block;
}
.form {
position: absolute;
top: 200px;
left: 250px;
width: 500px;
height: auto;
background-color: rgba(255,255,255,0.5);
color: #222;
display: block;
}
You should try background-color: rgba(255,255,255,0.5) which makes the background color transparent whereas the opacity: 0.4 makes transparent even the content.
See the DEMO