I'm trying to center and cover an image up the whole screen which is coming from the Unsplash Source API.
I think because the image actually gets fetched after the CSS is already applied it doesn't work just like that:
(If the demo might appear covered up run it in full-screen)
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
}
<div class="centered-image"></div>
Do you guys know a work-around?
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
background-repeat: no-repeat;
height: 100%;
background-image: url(https://source.unsplash.com/collection/1228371);
}
Made some CSS Changes. Give this a try.
Related
I'm having trouble with two of my divs not showing in Safari. They show fine on Chrome and Firefox. The buttons with the class .phquote and .designquote are not showing on the first page. Here is the link to my website to inspect http://shellhammersara.se
I've tried to see if anything is wrong with the images, but that isn't it. I tried taking them out and just added a background color to the div and it still wouldn't show.
Can anyone please help me with this issue?
Below is my code:
HTML
<main>
<div id="homebanner">
<div class="bannerbuttons">
</div>
</div>
</main>
CSS
#homebanner {
background-image: url("Images2/home.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
margin-top: -33px;
}
.contactbtn {
display: none;
}
.bannerbuttons {
width: 55%;
margin: 0 auto;
}
.phquote {
float: left;
width: 50%;
height: 45%;
margin-top: 40px;
background-repeat: no-repeat;
background-image: url("/Images2/ph-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.phquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/ph-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote {
float: left;
width: 50%;
height: 45%;
margin-top: 190px;
background-repeat: no-repeat;
background-image: url("Images2/design-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/design-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
In my case,sometimes when using flexbox safari messes up.
Giving flex a value solved the problem for me, e.g. flex: 1 0 auto
Try add "height:100%" to .bannerbuttons class
My question is about "background-image" in CSS. How can I add "background-image" in full screen? I used "width: 100% " but it doesn't work.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body {
background: url(http://i.imgur.com/aZO5Kolb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
html {
height: 100%
}
This image is too big, I want it to fit the size of the window: http://zgaming.comxa.com
but I do not understand how, I also tried height and width 100%
html
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></img></div>
css
.bgimg {
position: absolute;
top: 0;
left: 0;
z-index:-99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried this
.bgimg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-99;
}
.imgbg {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This answer
https://stackoverflow.com/a/43612299/7874902
works but on mobile there is some white space at the bottom..
You should set
background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");
and try with
background size: contain;
as with cover it's possible it cuts a part of the image.
check this:
w3schools.com/cssref/css3_pr_background-size.asp
Hope this code spinet help you.
.bgimg {
width: 100%;
margin: 0;
padding: 0;
}
.bgimg img {
position: absolute;
top: 0;
left: 0;
z-index: -99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></div>
This solution is purely meant to only show how to try and fill the viewport with a single image, no extras.
We use min-height: 100vh to tell the body tag to be as tall as the viewport. we use background-size: cover to center the image an have it fill all of the body element, cropping if necessary but maintaining aspect ratio.
body {
margin: 0;
height: 100vh;
background-image: url( 'http://zgaming.comxa.com/dist/img/bg.jpg' );
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
There's one major thing you have to realize with trying to fill a viewport, especially viewports with varying aspect ratios; you'll either have to crop part of the image at some point or distort it. Below we chose to crop it over distorting it.
You can't use background-size: cover on a img tag.
Just try to make background-image with yours and make div size at 100% on width and height.
You can make this rule directly on body :
body {
background: url(./path_to_your_image) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background: url('http://zgaming.comxa.com/dist/img/bg.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
}
html{
height: 100%
}
I'm trying to make a background image for mobile devices like:
body {
background: url("/resources/img/background2.jpg") no-repeat fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100% 100%;
}
In Chrome developers' tools it looks nice, but on a real device (with a smaller screen size) it does not. Why is this, and how I can solve this problem?
Snapshots:
You want a responsive background image which can get scaled down on smartphones. Use this:
background-image:url('/resources/img/background2.jpg');
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
How about?
background-image: url("/resources/img/background2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Try use <meta name="viewport" content="width=device-width, initial-scale=1">
This is the best solution
body {
background: url(../images/background.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;
background-color: #fff;
-webkit-background-size: calc(100vw) calc(100vh);
-moz-background-size: calc(100vw) calc(100vh);
-o-background-size: calc(100vw) calc(100vh);
background-size: calc(100vw) calc(100vh);
}
How do you get a Body Background image in CSS to stay fixed even as you scroll to content off the page. I've put a fiddle up: http://jsfiddle.net/eSALE/7/
This is my current CSS body code:
body {
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See the fiddle for the rest of the code.
Remove
background-color: #333;
under 'html, body {}' at the beginning of your CSS Style sheet.
Edit: All you really need to do is remove the top HTML in your stylesheet so that the style reads:
body {
background #333;
}
As mentioned in the comments, this is done as a fallback if the background image cannot be displayed.
Remove the background image from body tag and add to site-wrapper
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
DEMO
this is the solution of the problum
body{
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg');
background-repeat:no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center center;
background-attachment:fixed;
}
fiddle
This should do the trick..........
html {
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the updated fiddle......
http://jsfiddle.net/xcKs9/1/