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>
Related
the answer is i had to put one more / in the path and dont know why,example
background-image: url(/destinationfolder/imagename.jpg) not
background-image: url(destinationfolder/imagename.jpg)
i wanna make a full screen background and the code is so simple however it didnt work can any body catch the problem ?
here is the HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">this is our div</div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
and thats the css code
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
}
.bg {
/* the proper height for the image */
height: 100%;
background-image: url('cover.jpg'); /* the use image location */
background-repeat: no-repeat;
background-size: cover;
}
You almost certainly need background-size.
Keep in mind that a user with a 4K monitor is going to be rare compared to someone on a mobile phone. So be sure to use CSS Media Queries once you get to the last step of adding mobile support. You're the one looking at the screen to judge how you need to use background-size so be sure to tinker with the options in the developer tools; just resize the browser window down until the mobile effect takes effect. You can also use units such as percentages (background-size: 100% 100%;). Good luck!
.bg
{
background-image: url(images/bg-desktop.png);
background-size: contain;
}
#media (max-width: 1024px)
{
.bg
{
background-image: url(images/bg-mobile.png);
background-size: cover;
}
}
Try with setting min-height of body or div element to 100vh
body{min-height:100vh;}
Possible problem: The image should be in same directory as your css file since u are using relative path.
//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 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;}
I've made a banner for my new webshop, but there is one problem.
When the website is in full size for example on my laptop, the banner fits perfect, but when i see the website on mobile, laptop and smaller size then banner isn't fitting.
I really hope that some of you could help me to get the banner auto fitting.
The HTML code:
<script type="text/javascript">
var bannersnack_embed = {"hash":"bxplv88nb","width":900,"height":297,"t":1425594057,"userId":17355456,"wmode":"transparent"};
</script>
<script type="text/javascript"src="http://files.bannersnack.com/iframe/embed.js"></script>
Try look into using different image formats for different screens and CSS #media queries. Example:
#media screen and (max-width: 980px) {
/*Your CSS here*/
}
Also you might want to use responsive element with background image. Example:
body {
width: 100%;
}
.banner {
width: 100%;
height: 100px;
box-sizing: border-box;
background: url(http://static1.squarespace.com/static/51d44341e4b085686833bb66/520a9569e4b007829c46f58d/520a969be4b007829c473837/1378226922960/?format=1000w);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #fff;
}
<div class="banner"></div>
Here is a good tutorial: https://css-tricks.com/perfect-full-page-background-image/