I have been working on a solution to the problem with no luck. I have a set of background images, a full size set for desktop and a mobile optimised set of images.
Now when I run the following code on Chrome on the desktop and resize the browser to activate the #media then everything runs great and looks correct. But when I then go to test on safari on the IPhone I just get a blank spot where the background image should be.
<meta name="viewport" content="width=device-width, initial-scale=1">
section.box_park {
min-height: 500px;
background: url('/images/sample-park.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section.box_building_management {
min-height: 500px;
background: url('/images/building-management.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 420px) {
section.box_building_management {
background: url('/images/mobile-building-management.jpg') no-repeat center center fixed;
}
section.box_park {
background: url('/images/mobile-sample-park.jpg') no-repeat center center fixed;
}
}
Any idea why this is happening?
* UPDATE *
If I comment out the #media it will display the background images but obviously not the mobile optimised ones.
Related
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I am designing a webpage, which has a background image fixed, and i have a problem with it in mobile view. like, In desktop view, its perfectly alright. whereas, in mobile view, the image is too blurred and it is not good looking. i couldn't find where i have made mistake. I have attached images of both the views and my code for background image here.
Desktop:
Mobile:
My CSS:
body
{
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #ffffff ;
background-image: url(images/cover3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
You can use media query and change background-image or use background-size: cover;
use this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
background: none;
}
this fill fit a background for the screen size
Add
background-position: center;
background-size: cover;
I have a pretty standard MVC template I'm using for a project. On a view in my project, I am trying to display a different background image depending on my screen width. The problem is that if I wrap the CSS in media queries then push the content up to a development server, my background images don't load. I don't have this problem in localhost though. I'm using Bootstrap in my project, but this particular CSS is written in a separate file. Also, this project sits in another project on my server.
/Root Project
--My Project
CSS:
html {
background: url(/Images/img1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#media (max-width: 768px) {
html {
background: url(/Images/img2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.center-margin {
margin-top: 30%;
}
.header-text {
color: black;
}
}
The header in my HTML has the following metadata tags:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
After I took the media query off the first html block in my CSS, it started displaying again. The second block wrapped in the media query won't display. The other CSS inside the media query displays, so its just the background image that is giving me issues.
Your code is working. You should make sure that your image resources are uploaded to your server in the correct directory. Also, typically for loading URLs you're going to want to put them in quotes.
html {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#media (max-width: 768px) {
htm
l {
background: url("http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.center-margin {
margin-top: 30%;
}
.header-text {
color: black;
}
}
Here is a Codepen of this working with images hosted online.
I want to have a responsive screen height background image as shown in this site http://www.flavorplate.com/. I did research on google and github on that technique but wasn't able to find anything.
Basically you can do something like this:
<div class="bg-image">
<!-- Featured Content absolute -->
</div>
<div class="content-wrap">
<!-- More Content -->
</div>
html {
height:100%;
}
body {
height: 100%;
}
.bg-image {
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.content-wrap {
heigth: auto;
min-height: 600px;
}
For conditional loading of background-images, you have to use media queries or/and javascript or a plugin like this: https://github.com/M6Web/picturefill-background
Well, it's incredibly easy, try this:
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* For mobile devices */
#media only screen and (max-width: 767px) {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background: url(images/background-photo-mobile-devices.jpg);
}
}
You want some more comprehensive Ideas?!! check this out;
Background Full
I am creating a responsive design for my site.
I have a display logo like this:
<h1>example.com</h1>
and I show the logo in CSS:
#header h1{
margin-top:23px;
background: url(http://www.example.com/files/logo.jpg) no-repeat !important;
float: left;
text-indent: -9999px
}
I have now created a new CSS file for mobile visitors and responsive design.
#media (max-width: 480px) { ...
How do I achieve that the logo is re-sized according to width of user's phone/browser? I discovered background-size property but haven't succeeded in using it.
Thank you
Try
header h1 {
background: url(http://www.example.com/files/logo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}