I'm attempting to create a frosted glass effect using 2 images, one is the background of the page and one is the background that looks frosted. To achieve this i use the following code:
body {
background: url(interferentie.png) no-repeat center center fixed;
background-size: cover;
}
#centerlogo {
width:600px;
height:200px;
background:url(interferentie_lensblur.png) center center fixed;
background-size:cover;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-100px;
position:absolute;
}
In firefox, this works fine. But in chrome, the background of the div doesn't get centered. You can see an example here: http://www.wavelengthfestival.nl.
In chrome, it appears that the background of the div simply starts where the div starts. does anyone know of a solution for this problem?
#centerlogo margin-left:auto margin-right:auto
Related
I just started developing a new site and already ran into trouble with different browsers.
I have these lines of css to set the background image:
body
{
background-image: url("../Images/Background.jpg");
background-repeat: no-repeat;
background-size: max(100vw, 1920px) max(100vh, 876px);
}
This works fine in Chrome, but doesn't apply the background size in Firefox or Edge.
In the Firefox inspector it says 'invalid property value'.
Do you have any work around? I want the image to stretch to the window size, but maintain its size at its resolution if the window is smaller. I can't use min-height as that would stretch the window even if there is no content.
Thanks!
You can simulate this using pseudo element:
html:before {
content: "";
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background: url("https://i.picsum.photos/id/1074/800/800.jpg") center/cover no-repeat;
min-width:800px;
min-height:800px;
width:100vw;
height:100vh;
}
This question already has answers here:
Responsive css background images
(19 answers)
Closed 6 years ago.
I'm making a one-pager from an existing bootstrap theme that has a background image in the section with the background-size: cover selector applied to the header.
Currently, the image only covers about 80-90% of the screen vertically on most browsers, pcs I've tried it on. The bottom is filled with a white background, that of the following section below. I would like the image to occupy the entire vertical view when you first load the page.
I can manually edit the height by pixel to make it work for a given monitor/browser, but is there any way to have it dynamically resize based on the height of the view for each browser, machine, etc.? Or am I stuck with this "white space" problem.
Example in chrome on this PC:
https://i.stack.imgur.com/yqMHp.jpg
Give it height:100vh;
html,body{
width:100%;
height:100%;
margin:0;
padding:0:
}
.imageH{
width:100%;
margin:0;
padding:0;
background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
background-size:cover;
background-position:center;
height:100vh;
}
<div class="imageH"></div>
And if you have a navbar before this div say of height 50px then use calc(100vh - 50px)
html,body{
width:100%;
height:100%;
margin:0;
padding:0:
}
.navbar{
width:100%;
margin:0;
padding:0;
background-color:green;
height:50px;
}
.imageH{
width:100%;
margin:0;
padding:0;
background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg");
background-size:cover;
background-position:center;
height:calc(100vh - 50px);
}
<div class="navbar">navbar comes here</div>
<div class="imageH"></div>
hi just give this code
body{background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
you can see this as a example
https://blackrockdigital.github.io/startbootstrap-the-big-picture/
thanks
this problem is occur due to your background size.you have to adjust your background image size.
background-size:cover; or use this background-size:100% 100%;
this will fill all white spaces that is in your background image at botoom.
So I've got a body with a CSS gradient background. Then I've got an absolute positioned div nested just within that with a background overlay. In turn, the content wrapper div is then nested within this. I want background div to be fixed and the web page to scroll over the top. The problem is, when the page scrolls the background overlay div kind of disappears like a roller blind...
Here's my fiddle to demonstrate the issue... http://jsfiddle.net/WPk6h/ (try scrolling the result pane to see the effect I mean).
HTML....
<body>
<div id="bgwrapper">
<div id="wrapper">
Content...
</div>
</div>
</body>
and CSS...
body {
background-color:#fcf
}
#bgwrapper{
position:absolute;
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
#wrapper {
width:300px;
margin: 0 auto;
}
Any ideas how to prevent this so that the background overlay remains visible at all times?
note... I've not tested it heavily in all browsers yet - the issue is in the first browser I've been using, Chrome so I haven't got round to testing in others yet.
EDIT...
People are wondering why I don't just apply the background image to the HTML or BODY tags - well, there is a clash between CSS gradients and background images - you cannot have them both in the same element, as can be seen with the two examples below. This is why I'm using an additional background wrapper div to create the effect of an 5% alpha image overlaying the gradient bg.
http://jsfiddle.net/tqbtm/ (attempting to add gradient and bg image to body tag)
http://jsfiddle.net/ca5wa/ (adding bg image to bg wrapper div over the body gradient)
You need to remove position: absolute from #bgwrapper div:
#bgwrapper{
width:100%;
height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
Update jsfiddle
You could also have a look at the following link:
http://css-tricks.com/perfect-full-page-background-image/
which details several different methods of doing full-screen, fixed, backgrounds
the method I currently use is method 1 (CSS3) for this kind of technique
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
As Doug told you just add background-attachment:fixed; background-size:cover; width:100%; height:100%; to your #bgwrapper style.
Set the Position to be fixed
position:fixed
In ...
#bgwrapper{
position:fixed
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
here is my css by which i position one image on at center.
.BusyStyles
{
background-image: url('../images/busy.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
can i enhance the above css as a result i can place another image at center on the div just below the busy.gif......is it possible? if yes then please give me the css by which i can position two image as background for div at center one after one. thanks
Check sample for two background image in a single div tag.
CSS:
.container{
width:300px;
height:150px;
background:url(http://img.b8cdn.com/images/icons/loading_large_icon.gif) no-repeat 50% 28%, url(http://twitter-badges.s3.amazonaws.com/t_logo-a.png) no-repeat 50% 60%;
border:1px solid #CCCCCC;
}
You can only do this in CSS 3 (http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css)
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
I agree with LiamB's solution to this if you have the ability to only support browsers that are compatible with CSS 3.
However, if you need to support more browsers than that I recommend you solve this problem by having 2 divs. Both divs will be positioned on top of each other. The div positioned below contains only a background image. The div positioned on top contains another background image (positioned to look as if it is below the background image from the other div) and any content you want to have.
How to set one background till half of the page and another background from half of the page till the end, while content div remains in exact middle of the page?
Please add an example!
<body><div id="right"><div id="content"></div></div></div>
css
body{ background:url("../a.gif") repeat-x scroll left top transparent;height:632px;}
right{background:url("../r.jpg") repeat-x scroll right top transparent;margin-left:50%;width:100%;}
content{width:980px;}
Problem - backgrounds is placed ok, but content div isn't in the middle of the page ....
ANY SOLUTIONS?
without css3:
html
{
background: url(...) x y repeat;//x and y for wherever it needs to start, repeat can be any value, up to you.
}
body
{
background-image: url(...) top left repeat-x; // or no-repeat if you only want it once
}
With css3:
html{
background: url(http://placehold.it/50x50) top left no-repeat,
url(http://placehold.it/50x50) top right no-repeat;
}
http://jsfiddle.net/jfkqd/
Center horizontally with
.content{
margin:0 auto;
width:200px;
height:200px;
}
(needs a text-align:center; to work in ie)
To center horizontally and vertically:
.content{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}