I'm trying to fix the background image. On other devices is displayed well... but in Safari iOS looks very ugly. The code is as follows:
.main {
background: url('imgs/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Thus it is seen:
The code is here: https://github.com/lozanotux/lozanotux.github.io
SOLUTION (CSS):
.main {
background: url(../imgs/bg.jpg);
background-color: #444C5C;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
zoom: 100%;
}
Related
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.
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%
}
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/