I am trying to make a mobile friendly website with a responsive background. To do this I have made 4 different sizes of the same background: 360px wide, 600px wide, 1000px wide and 1500px wide. I use media queries to depent whichs background to display.
/*------------- Styles for different screen sizes -------------
/* For width smaller than 400px: */
body {
background-image: url('../data/background/360.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
/* For width bigger than 600px: */
#media only screen and (min-width: 600px){
body {
background-image: url('../data/background/600.png');
}
}
/* For width bigger than 1000px: */
#media only screen and (min-width: 1000px){
body {
background-image: url('../data/background/1000.png');
}
}
/* For width bigger than 1500px: */
#media only screen and (min-width: 1500px){
body {
background-image: url('../data/background/1920.png');
}
}
/*-------------------------------------------------------------*/
however, the smallest background (360.png) doesn't show up when the screen is smaller than 600 pixels. All other backgrounds do show up when I resize the screen. What's the problem here? The url is correct.
the css code is fully working. have you put the meta tag in head section
try using this it will work.
<meta name="viewport" content="width=device-width, initial-scale=1">
put this in head section.
You can try inverting everything and using max-width instead of min. It means that max-width: 600 will be applied only when width is smaller than 600... Also it would be cool to see a jsbin.com demo of the issue, maybe you have something else with higher priority overwriting the css values you expect.
Your code works well: JSFIDDLE
The only problem can be:
background-attachment:fixed;
Because it is disabled on the most of mobile phones.
To fix that you should add something like:
#media (max-width: 599px){
body {
background-attachment:scroll;
background-size: cover;
}
}
You can try these background properties
body{ background-image: url('../data/background/360.png');background-size:100% 100%; background-position:center center;background-repeat: no-repeat;}
Related
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
I am new to CSS and media queries and I have also followed this thread but didn't got my problem solved. I have an image which is bigger than the screen resolution. The dimension of image is 1532*933 and the resolution of my desktop is 1366*768. I am trying to make a page in which the image is in the background of the body. I am trying to perfectly fit the image on the screen. So for that I have written this CSS
html, body {
min-height: 100%;
}
body{
font-family: 'Source Sans Pro', sans-serif;
background-image: url("/public/images/image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 0, 0;
}
#media (min-width: 1024px), (min-height: 630px) {
body { background-size: auto; }
}
But I can clearly see that the image is not getting placed properly. It's being cut off from the bottom side and right hand side. I want to place this image properly in the full screen (means top=0, bottom = 0, right = 0, left = 0) without losing the quality of image.
Also I am trying to get the image perfectly fit in other resolutions as well using the same image, so I am using media queries.
How can I achieve this ?
Regards
I hope it could help:
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/1280px-Red_flag.svg.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
</body>
</html>
You have many options. If you need this page only on your pc you can edit yuor image with a dedicated application and then use this in your page. If you need a responsive layout you should use several versions of the image that you want to provide as background image and use media queries to choice the right one for your device. Let's say that you have an image called image.jpg (500x500) you can force resizing using height and width but the image will lost its quality. However you can use media queries like this:
/*width and height of an ipad*/
#media (min-width: 768px), (min-height: 1024px) {
body { background-image: url("/public/images/image_ipad.jpg"); }
}
/*width and height of a Galaxy S5*/
#media (min-width: 360px), (min-height: 640px) {
body { background-image: url("/public/images/image_galaxy.jpg"); }
}
Obviously you can play around with media queries a little better choosing only width range so you can say from x width to y width i will use this image and so on. Keep in mind that for this purpose you can use a vectorial image to make things easier for you.
Try
#media (min-width: 1024px) and (min-height: 630px) {
body { background-size: auto; }
}
I have figured out a way to achieve this. My image is perfectly aligning now without any distortion. Here is my code snippet:
.main-background {
background: url("https://static-fastly.hackerearth.com/static/hackerearth/images/logo/HE_logo.png") no-repeat center;
margin: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.main-content {
height : 100vh;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="main-background">
<div class="main-content">
</div>
</body>
//html code for parallax - help required here.
I have added div for parallax with name parallax and parallax css in stylesheet. How can I disabling it for the mobile and desktop view? I had gone through numerous posts but no help.
But I don't want it to be disabled for desktop. I just want it to stop working for the mobile. Can something be done about it? when i use the media query it disables on my desktop but works fine on mobile.
</head>
<style>
#media only screen and (min-width: 320px) and (max-width: 989px) {
.parallax {
background-attachment: scroll !important;
}
Parallax code:
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
What you're looking for is known as a media query, which is denoted by wrapping your selector in #media screen and (min-width: x). Anything within this #media tag will only get applied to devices matching the specified criteria (in this case, a minimum width).
Simply set the minimum width to correspond to the width of the smallest device you wish to include for the parrallax effect. A list of common devices and their corresponding widths can be found here, but you'll probably want something like 480px.
Here's a full example:
#media screen and (min-width: 480x) {
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
I tried to do this:
#media only screen and (max-width: 500px) {
body {
background: url("http://popidesigns.ro/images/bgtel.png") no-repeat center center fixed;
}
}
With the new picture # 1080x1920(normal it was 1920x1080)
But no change. How can I make the BG Pic visible on the whole phone screen?
(the bg image is that thing above the logo)
phone ss
laptop ss
add background-size: cover to fill the container/body
...and make sure the body is at least 100% high by adding
html, body {
height: 100%;
}
See if this helps you: https://codepen.io/panchroma/pen/KyrvOP
CSS
html, body {
height: 100%;
}
#media screen and (max-width: 500px) {
body{
background:url('http://popidesigns.ro/images/bgbgb.png') no-repeat;
background-size:cover;
}
}
I also added a viewport meta tag in the head of the page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body{
background: URL("http://popidesigns.ro/images/bgtel.png") no-repeat center;
background-size: cover;
width: 100%;
}
This will make sure that the image doesn't repeat and is centered. The background-size:cover; will ensure that the image will cover the entire screen. width at 100% helps with that.
I've been researching how to use media queries properly, below is the site I'm trying to make responsive. However, I'm finding trouble adjusting the image of my picture, I test the responsiveness on my PC, which is 17 inches and also on my Galaxy 5.
**edit, the problem is solved for me
.background-image {
position: fixed;
z-index: 1;
background:url(nycgold.jpg) fixed;
background-size: cover;
background-position: center;
padding-top: 13%;
padding-bottom: 100%;
font-family: 'Montserrat', sans-serif;
}
#media only screen and (max-width: 320px) {
/* styles for narrow screens */
.background-image{
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 1800px) {
/* styles for MacBook Pro-sized screens and larger */
.background-image{
width: 100%;
height: auto;
}
}
Any help is appreciated.
First, you've got 3 styles here:
The default style
The style for max-width:320px
The style for max-width:1800px
But all three styles set the background image to the same size. Backgrounds are not really something that you need to write responsive code for because they generally try to fit the browser's rendering area, but background-size:cover set once in the main style would ask the browser to fill the background with the entire image, so setting widths isn't necessary.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for more information about the background-size CSS property.
To test out your media queries, make sure that there are DIFFERENT values set for elements in them and use something that is better suited to responsive, like an image in the foreground. <img src=""> or text size of an element.
If what you want is for the background to show once, with no repetition, add this background-repeat: no-repeat;
Other than that, your image should fit the whole width of whatever size the MQ is.