//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>
Related
I'm using background image on main div and different elements positioned in it. Background looks good in desktop and scrollable in mobile version. I would like to have either scrollable of overflow-x in tablet or full view of image in tablet.
When i apply overflow-x:scroll; to the div that has background, i'm able to scroll things on top of it but not background itself.
I tried background-attachment: scroll; it is not working. and background-size: cover is also not working.
What is the best way to tackle this?
What is the media query i can use to make same view for mobile and tablet?
P.S: I'm using two different images for desktop and mobile. I could use either of the images for tablet.
This what i've in tablet view for main div
#media (min-width: 768px)
.virtual {
background-image: url(/*****/stage);
background-position: center -30px;
min-height: 500px;
}
This what i've in mobile view for main div
#media (max-width: 767px)
.virtual {
overflow: hidden;
}
This what i've in mobile view for inner div(of main div)
#media (max-width: 767px)
.hotspot-container {
background-image: url(/****/stage-sm);
background-position: center center;
background-repeat: no-repeat;
background-size: 1341px 768px;
position: relative;
min-height: 500px;
width: 1341px;
top: 2px
}
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>
I want my background image to be fixed on desktop and scrolling on mobile but background attachment in media query is not working.
<style type="text/css">
#media only screen and (max-width: 991px ){
.post-image{
height: 40vh;
background-attachment:scroll;
}
}
.post-image{
height: 50vh;
background-attachment: fixed;
}
</style>
i have added background image by inline css
header
some text
You need to change the order of your CSS rules. Media queries do not add any level of specificity to the enclosed CSS rules, so what happens is you overwrite your own mediaqueried rule by a non-media-queried, general rule because it comes after the mediaqueried rule in your CSS source order. Whenever there are several conflicting rules with the same specificity, the last one wins.
<style type="text/css">
#media only screen and (max-width: 991px ){ // this tells the browser to only apply the following set of rules if the condition is met
.post-image{
height: 40vh;
background-attachment:scroll;
}
}
.post-image{ // this tells the browser to apply the following rules not considering any conditions other than those specified by the selector
height: 50vh;
background-attachment: fixed;
}
</style>
So to get what you want, put your media queries at the end of your source code:
<style type="text/css">
.post-image{
height: 50vh;
background-attachment: fixed;
}
#media only screen and (max-width: 991px) {
.post-image{
height: 40vh;
background-attachment:scroll;
}
}
</style>
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/