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.
Related
In my css file, I have an id named "homehero", which displays a background image.
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
In my html file, I have a div that uses this id to display the image; however, the image does not appear whatsoever.
<div id="homehero"> <!-- Home Page Image -->
<!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
<!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->
The full html file can be found here.
The full css file can be found here.
Edit:
The image is displayed when setting it as the background image for another element, it is only in this id where the issue occurs.
Please Put width and height
width:100%;
height:100vh;
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
height:100vh;
}
I would suggest below changes,
#homehero
{
background-image: url("images/coast.jpg");
width:300px;
height:300px;
background-size: cover;
background-repeat: no-repeat;
}
Where, your image will be cover and if you specifies width and height it would be good and also your image will not be repeat as no-repeat property is used.
These are a few things I recommend you try:
Try setting the background size. (Instead of %, try setting it to px.)
Most of the time, the background picture is applied, but because our div has
no dimension, we are unable to view it.
Double-check that your picture file is located in the images folder.
Check your image's extension and make sure you're using the correct one in your code.
Use the dev tools to inspect the element and see whether the background property is being overridden by another CSS rule.
If none of the above methods work, try pasting the picture's real URL by copying the image address from the internet rather than providing a folder path.
This method works 90% of the time.
i recommend to use inline scope css, i hope it works for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="#homehero {.css">
<style>
#homehero {
background-image: url("image/image.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div id="homehero">
</div>
</div>
</body>
</html>
this might be the reason why it can happen
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As%20Inline%20has%20the%20highest,sheets%20have%20the%20least%20priority.
It looks like you're entering the url in the background image, for background size using background-size: cover;
If your url address is correct, then try adding
width:100%;
height:100vh;
I'm creating a website in which I need a full page responsive background image to display across all devices. I have created this image in Photoshop and it is 2560 x 1440 (16:9).
I have included white borders around the top, bottom, left and right of the image in stark contrast to the purple background to make it easier to see what's happening.
For some reason when using the code below, the top and the bottom of the image (the white borders) are being cut off.
This problem disappears when I use inspect element and set the viewport to 1920 x 1080 etc...
My monitor is set to 1920 x 1080 resolution and I am using the Opera browser, also tested in IE though.
Here's an image of what's happening - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a
There should be equal width white borders on the top and the bottom but for some reason there's not.
Any and all help appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/styles.css">
<title>Hello, world!</title>
</head>
<body>
</body>
</html>
html {
background: url(../media/placeholder.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It's because you are using background-size: cover it's doing exactly what it should. It will 100% "cover" the element leaving no "empty" space around it no matter how it's resized, and it might cut things off.
Try using background-size: contain instead, that might be more of what you are looking for. 100% of the image will always be visible, but it might leave some blank spaces around it.
Here's a good demo of each background-size option and how it looks
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
FYI, you do not need to include the different vendor prefixes (-o-*, -moz-*, and -webkit-*) for this feature, it's pretty well supported (unless of course you need to support IE8, Firefox 3, etc.)
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).
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%;
}
html ,body {
height:100%;
width:100%;
margin:0px;
}
h1 {
margin:50px;
}
.jumbotron {
height:100%;
background-image: url("http://www.zoophotels.com/wp-content/uploads/2015/02/cpt-new.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron">
<h1>Welcome</h1>
</div>
</body>
</html>
I don't know what's wrong, but it seems like when i change background-size value to cover, the background doesn't scale based on my browser size, but when i set the value to 100% 100%, it scales like i expect.
So, how to keep the value of cover and let jumbotron class do the right scale (in this case keep the value of background size (cover), while the size when jumbotron do scaling still cover)
Additional Info:
i want the result to be
1.The image cover to be like 100% 100% (fit to screen)
2.When i resizing my browser window, i want the image ratio still same like 1 step
check this web: http://www.qerja.com/
i want the jumbotron looks like this website jumbotron, resize the image width when i resizing the browser windows
Cover is working as expected. The image maintain's it's aspect ratio as it scales in relation to your browser window. Unlike applying 100% 100%.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
CSS3 background-size Property