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?
Related
My website background image responsiveness works during md size -> when it turns in sm and xs it is cut - it means when I want to see the cat during xs I can see only a piece of cat. How to fix it to see all my background photo during smaller sizes?
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?familyans+SC:wght#300&display=swap" rel="stylesheet">
<div th:replace="fragments/front_head"></div>
</head>
<body>
<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>
<nav th:replace="${#service.getLoggedCustomer()} ? 'fragments/cattery_logged_in_navbar' : 'fragments/cattery_navbar'"></nav>
<footer th:replace="fragments/cattery_footer"></footer>
</body>
</html>
CSS:
body {
padding-top: 120px;}
First, remove the background-size and background-position css from the style attribute of the .bg-image element. Then try this CSS.
.bg-image{
background-size: contain;
background-position: center;
}
#media screen and (min-width: 450px) {
.bg-image{
background-size: cover;
}
}
The reason it's cropping is the "cover" background size is displaying the entire image centered. Of course that leads to cropping since the smaller sizes are too small to show the whole image in its original size. Contain makes sure you can see all of the image.
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%;
}
I have an issue with max-width media query. In this if i am use that media query:
#media only screen and (min-width: 320px) and (max-width: 480px) {
}
Then its not work on 480px resolution. But if i am use that media query:
#media only screen and (min-width: 320px) and (max-width: 640px) {
}
its work with on 480px resolution but not work on 640px. Its work fine with Chrome.
I see this below link also. But not successfull.
Media queries not work in firefox
mediaqueries max-width not working in firefox
Media queries not working on firefox
My meta tag is:
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Please help.
It should work perfectly well in any browser.
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
<body>
<div class="change">Some content</div>
</body>
</html>
.change{
background: #f00;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100px;
display: flex;
justify-content: center;
}
#media only screen and (min-width: 320px) and (max-width: 640px) {
.change{
background: #0f0;
color: #00f;
}
}
Here is a JS Fiddle example, change the width inside media queries, it should still work.
https://jsfiddle.net/rachit5/xm2tnx53/
Note that when output is rendered inside an iFrame, the media queries
will look for the width of iFrame and not the original page.
Using
#media only screen and (min-width: 320px) and (max-width: 480px) {
}
Means that changes would occur when screen width gets to 480px and revert back to normal when screen width gets to 320px
Don't really know what you want but the explanation above should help you out
I am trying to make a responsive website for desktops, tablets and mobile devices but I am facing some trouble. I created a document called responsive-Ipad.css that would work only in Ipads (I set the min-width to 600px) but somehow the css files are affecting the screen content in any device (tablet, mobile or desktop). I have 2 other css files.
style.css that I use to set the desktop layout,
responsive.css to set the mobile layout and responsive-Ipad.css for Ipads.
the style.css doesn't have media query
the responsive.css starts with this line code:
#media only screen and (max-width:420px){
and the responsive-Ipad starts with this line code:
#media only screen and (min-width: 600px){
Does anyone know how to fix this?
Image that represents the problem
Try using these media queries and add this meta tag
<meta name="viewport" content="width=device-width" />
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
Check whether you have included your CSS (File path should be proper) file properly in your HTML page. And for responsive web page you need the below meta tag to be included in your HTML page. Just before including your CSS file.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
This will be better if you include these lines in your HTML page.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
/*
CSS for your media query
*/
#media (max-width:420px){
/*your css for devices that are below 420px*/
}
#media (min-width:600px){
/*your css for devices that are above 600px*/
}
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/responsive-ipad.css">
</head>
<body>
<!--HTML Content-->
</body>
</html>
Make sure you include all your css files into your HTML file.
Hope this helps.
Okay so basically it will not display my background image. I have looked at all the other posts and none of them work. Here is the code.
Here is the Html. Note that the app.css and app.js are just bootstrap files renamed.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width-device-width, initial-scale=1" />
<!-- Above is Important -->
<meta name="description" content="HTML, CSS, BOOTSTRAP" />
<meta name="author" content="James Mehltretter" />
<title>Download Free HTML Templates</title>
<link rel="stylsheet" href="app.css" type="text/css" />
<script src="app.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Here is the part of the CSS that I edited.
body {
margin: 0;
background-image: url(background.png);
}
The JavaScript file is just generic bootstrap. Here is the link to the file I am actually using though.
The Bootstrap JS
Thank you.
Your Body has no height and there's nothing in it to put a background on.
Make sure your body has some height to it.
body {
margin: 0;
background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
background-size: 1440px 800px;
height: 300px;
}
Check that the image background.jpg exists within the parent directory of the directory that contains the css you've provided.
Are you getting a 404 error on the file path in your javascript console? Also ditch the quotes. Don't think that's right. I think w3Schools is wrong. Here is Mozilla docs showing no quotes on URL:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Check again with this code:
body {
margin: 0;
background-image: url(../background.jpg);
background-size: 1440px 800px;
}
If you're trying to make the image cover the entire screen all the time use HTML or HTML and BODY together.
See working Snippet at Full page.
html,
body {
height: 100%;
width: 100%;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d4/Tokyo_by_night_2011.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
As long as you have given the height, the image will show.
In this example, height: 100vh, which means it covers the whole screen.
body{
background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
height: 100vh;
}
The best practice however is to set it to cover and no-repeat, so that the background image is shown only once despite the screen size.
body{
background-image: url('https://image.freepik.com/fotos-kostenlos/gruene-wiese-hintergrund_1252-1098.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}