I tried to put an image as a background.
On desktop it works very well but when I try with my phone it doesn't work. I can't understand why because I put cover as a background-size and on the mobile it should cover all the space.
this is the code:
CSS
body {
background-image: url('/nutickets/images/bluenight.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/nutickets/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
image on my phone:
If I check with the Toogle device toolbar of chrome everything is all right but when I try with my smartphone doesn't work. I flushed the cache, I tried in incognito, I tried with different mobile browser but nothing.
This worked for me on my android device - try forcing the html element to cover the full height of the device:
html {
min-height: 100%;
}
Related
I'm working on a small website and since I'm almost done with it, I wanted to see it online... Everything went fine, from my laptop, on all screens the website was working great and the background image had the right size/position. I was too happy for that but once I opened it from my phone I got a surprise: the background-image looks totally different compared to the simulation performed from my laptop.
I already tried to add the below code but it did not change anything.
CSS:
.main-cont{background:
linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.0)
),
url("../images/home-background.jpg")}}");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
background-size:cover;
}
#media (max-width: 768px) {
.main-cont {
background-attachment: scroll!important;
height:100vh!important;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ flask_util_js.js }}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='/CSS/style.css') }}">
<title>Title</title>
</head>
<body >
<div class='main-cont' >
# Nav and main content
</body>
</html>
I'd really appreciate your help, I'm completely stuck!
Link: http://alessio98.pythonanywhere.com/home/
On mobile ( wrong )
On desktop ( correct )
Category section:
Mobile simulator
Mobile
Thanks for the link and screenshots, that helps a lot.
I believe the issue is background-attachment on the div.main-cont HTML element is not supported on the phone you have. In your browser, if you open the inspector and disable (uncheck) the CSS that says background-attachment: fixed;, you will get what you're seeing on your phone.
If you look at the browser support for background-attachment on caniuse.com, it's only 82% overall, and no support at all on Safari. When that CSS doesn't work, instead of the background image getting sized for your screen, it instead gets sized for the div it's in, which is like the height of the page. That's why the image looks zoomed in/huge.
If you want to keep the background-attachment: fixed line, I'd recommend changing background-position to top and adding a new line background-size: auto 100vh to keep the size in check. It won't scroll on Safari, but it'll look more normal.
If you still want this background image to scroll with you, you'll probably have to change tactics and add an HTML element with position: fixed that has the background. Fixed images or content can get messy fyi.
I am new to HTML/CSS and I am having trouble making the background image of my div cover the full screen. I have used background-size:cover but it still has large margins on the left and right of the screen.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta viewport="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
</div>
</body>
<html>
CSS
.container{
height:100vh;
width:100vw;
background-image:url("city.jpeg");
background-repeat:no-repeat;
background-size:cover;
background-position:center;
opacity: 0.8;
}
Please try using img: {width: 100% height:100%}. Your best approach would be to inspect the element and check if the div that contains the image is restricitng its size or not. You can use firefox to inspect (I just prefer it over chrome as it shows the size of any element better visually).
By default, the body has a margin around it. Try this:
body {
margin: 0;
}
Use following code:
.background-image {
width: 100vw;
height: 100vh;
}
(Please be kind I'm fairly new to all this).
I've tried using cover, absolute, auto and whatever else to try and get the background to resize along with the page. Whenever I make the resize the page smaller or bigger, I'm left with a white box at the bottom:
https://imgur.com/a/KauGhfD
The only way to get the white to go away is if I make the page full size again. Here's my CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: cover;
background-positon: absolute;
overflow: hidden;
width: 100%
top: 0;
left: 0;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
try fix this issues :
add ; after width: 100%
this property value absolute not correct background-positon: absolute;
check this link to know the correct value
https://www.w3schools.com/cssref/pr_background-position.asp
you have also a typo on positon should be background-position:
you can use this code for cover for background of page but you must keep your ratio aspect for picture
your code have two error
1- background-position:absolute is wrong
2-width:100% it is not correct because body have this properties
then you must change your code like this
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
}
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
this bug is driving me nuts!
I have a website where I placed a background image on the body element and did the usual no-repeat center center fixed cover stuff, It looks fine on every browswer I have tried except android chrome so far, On android chrome it seems to give the home page some scrolling and you can show white space several hundred pixels high. It works on chrome desktop, and even the various android dev tool simulators.
Here is the CSS I'm using -
body {
background-color: transparent !important;
background: url('../../images/pagesbackground.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
I've tried this same css on the HTML element as well to no avail (with a combination of height: 100vh / 100% on both body and or html element). I've also tried taking off the background attachment-fixed, but then on other pages it doesnt scroll down for the content that expands down. I'm using bootstrap, and Angular to serve each page as a template. This is the index.html that serves the templates in the ng-view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Goldbee Dev</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico|Luckiest+Guy' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">
<div ng-view></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/all.min.js"></script>
</body>
</html>
I've also tried just making the background image a div that contains the ng-view and doing the same thing with no success. Anyone have suggestions?
One bandaid I used for now (as the site is live) - I made it the background of the HTML element again, and made the height 200%. It prevents the whitespace but it scrolls down into a lot of empty area if you scroll down now. Is there a way to prevent scrolling on the home page without JS or Jquery (I know how to code in those, but looking for the simplest method possible).
My mobile background-image is moving. In every page it has an different position.
My css code:
body {
background-image: url('/IMG/city.jpg') center center cover no-repeat fixed;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
Also tried this:
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
to improve page load speed on mobile internet connections */
background-image: url(/IMG/mobile_background.bmp);
}
}
Also I put this in my HTML files
<head>
<title>My name/title>
<link rel="stylesheet" href="/CSS/style.css">
<link rel="shortcut icon" href="/IMG/favicon.ico"/>
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/mobile.css" />
<!-- Viewport is voor mobile devices -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
</head>
What is wrong here?