CSS Challenge:
This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time.
<body>
<div class="background"></div>
<div class="content"></div>
</body>
and the CSS:
html{
height:100%;
}
.background{
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
background-image: url('../image/backgroundpicture.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 10%;
}
.content{
width:100%;
height:200px;
position:relative;
z-index:1;
top:1800px;
}
The Problem is there too, when I put the background-image in the Body!
This is (FINALLY) solved due to changes in how Chrome for Android and iOS Safari work! Have to use 100vh for the height and it will function exactly as expected.
https://developers.google.com/web/updates/2016/12/url-bar-resizing
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('../image/backgroundpicture.jpg');
background-size: cover;
z-index: -1;
}
Should be all you need!
Could be wrong, this question is a little unclear. By default there will be white space which can be removed with this snippet taken from a CSS Reset. Does that help?
CSS
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Do you want the background to be underneath all your content? If so, you should just apply it to the body.
CSS
body{
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Edit - Create an HTML page exactly like this, is there the same problem?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, body div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
#background {
background: url('http://www.placehold.it/500') fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div id="background">
<!-- Fill me with content -->
</div>
</body>
</html>
Wish that one day someone could work out a solid work around for a viewpoint that changes height...
I have tried a lot of different ideas, and still can't find one that works well.
The best that I have found is to read the (window).height() and add 60px to account for the title bar, and resize the element containing the background to that height..
Its still not the best as 60px will not always be spot on and you are just expanding the background past the smaller viewpoint size..
If there were only a way to get the max-viewpoint size then that would solve everything :(
body {
padding : 0;
margin : 0;
}
This has to work.
Please take a look at backstretch.js which keeps the image responsive no matter where we open the site whether in a mobile or desktop.
Related
On my website (www.wetter-goch.de) I'm showing current weather information. for mobile device i added the overflow-y css attribute to the div-container.
This is working like charm on iOS' Safari, but on Android the site does not allow to scroll through the content. additionally my background image is not scaled to the viewport-size of the mobile-device.
I'm creating the background by the following css
<style>
html {
background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
HTML-Viewport Meta-Tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
Sidebar-CSS of the hole website...
.leftsidebar {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
width: 280px;
height: 100%;
padding: 10px;
background-color: rgba(255,255,255,0.7);
overflow-y: auto;
}
Related media queries
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1000px) {
.leftsidebar {
width: 100%;
}
.rightsidebar {
display: none;
}
.radar {
display: none;
}
.statistics {
display: none;
}
}
Hope anybody could help me solving this.
In order to use the media type that's specified you need to query the page to determine the style sheet to load. You'll need to added a media attribute to the style sheet that is for mobile "handheld". It'll then load the correct sheet on Android.
<head>
<link rel="stylesheet"type="text/css" href="theme.css">
<link rel="stylesheet"type="text/css" href="print.css"media="handheld">
</head>
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
Hey guys,
my header and footer background image not displaying correctly on mobile devices like android or iPhone, same goes for the iPad, the background image for header and footer is not getting displayed correctly, resulting in a cropped background image.
I tried with javascript and css, and technique after technique, but nothing works. It is neither one nor the other of these styles work on my WordPress website www.awebdesign.co.uk and I don't know what do with my mobile site anymore. I tried overflow-x: hidden; but did not want to do anything.
Tried these styles below
.header {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
I also tired the following for the footer, but deleted it later because it didn't do anything good:
footer.footer {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
Than I've implemented media queries,
#media only screen and (max-device-width : 480px)
#media only screen and (max-width: 768px)
#media only screen and (max-width: 1024px
and later changed to this,
#media screen and (max-width: 480px)
#media screen and (min-width: 768px) and (max-width: 979px)
#media screen and (min-width: 981px) and (max-width: 1024px)
However, it displays only the starting position of a background image on the left side. It doesn't display correctly across horizontal line, it displays vertically rather than horizontally. Please help me to find a solution to this problem and consequently learn how to apply CSS background image properties to both mobile and tablets (portrait or landscape).
I think my question is clear but if you have any questions, feel free to to ask, and I hope that others find this helpful too. Thanks in advance!
I deleted the CSS code above to clear my custom styles, the document structure, an HTML5 page, and classes will now look something like this:
<!doctype html>
<html>
<body>
<header class="header">
<div class="container">
<div class="panel_1"></div>
</div>
</header>
<section class="middle">
<div class="container">
<div class="full_width"></div>
</div>
<div class="clear"></div>
</section><!-- .middle -->
<footer class="footer">
<div class="container">
<div class="footer-nav">
</div>
</div>
</footer>
</body>
</html>
.container {
width: 940px;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat;
width: 940px;
height: 270px; /*border: 1px solid #09F;*/}
section.middle {background: #CCC; clear: both;}
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
footer.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
footer.footer {padding: 36px 0; clear: both;}
.footer-nav {float: left;}
I think you mixed up the value cover with contain.
Contain will make your images snap to the width of the viewport and not scale them up until they meet the bottom of the element they are residing in.
Hope this helps. =)
so I have this html markup:
<div class="nav"></div>
<div class="content></div>
.nav{
background: url(...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
}
The .nav element is fixed positioned with background-image and background-size: cover set. It also has a higher z-index than .content element, so that the .content would hide behind the .nav when scrolling down the page.
This setup works well in browsers but fails on android/iOS (the background image on .nav element becomes transparent and does not hide the .content).
Any ideas?
JSFiddle: https://jsfiddle.net/amp1Lyjq/1/
This part is a fix for iOS momentum scrolling:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
I'm having some troubles displaying my first websites on mobiles devices. When the device is vertical, the website background image does not fit the entire screen i've tried with the background-size: 100% 100% rule but does not work either. This is my css right now:
background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
The last trouble is the footer. It does not stick to the bottom of the screen even on some PC. This is the css:
<footer id="colophon" class="site-footer" role="contentinfo">
#colophon {
background: #000 none repeat scroll 0 0;
color: #ffffff;
opacity: 0.8;
padding: 20px;
}
I tried with bottom:0px but does not work and this is all.
Thanks in advance.
To make your background image fill the entire screen you can use background-size: cover. You will also need to make the body 100% height.
body.custom-background {
background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
background-size: cover;
height: 100vh;
}
It, however, will not look right with the current background image. You might want to make this 2 images instead.
For the footer, assuming it is only for this site and you will not change the height, or you can change the CSS accordingly, you could make the page id 100% of the screen height and add a bottom padding that is at least as high as the footer.
#page {
position: relative;
z-index: 999;
margin: auto;
min-height: 100vh;
padding-bottom: 250px;
}
Then you can give the colofon an absolute positioning.
#colophon {
background: #000;
opacity: 0.8;
color: #ffffff;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.
the CSS:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-attachment: fixed;
}
also tried this but didn't work.........
html {
background: url("images/320htmlbackground.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.
It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.
For me this works well:
body{
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#media screen and (max-width: 767px) {
height: 100%;
overflow-y: auto;
}
}