I have a class to display images with 100% width, it works well in desktop browsers, but in mobile versions, specifically Android, the image is not responsive to the screen, only a part of the image is visible.
my style is:
.parallax-bg {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 600px;
width: 100%;
}
#media only screen and (max-width: 575px)
.parallax-bg {
height: 300px;
}
<div class="parallax-bg" data-image-src="images/image.png" data-stellar-background-ratio="0.5"></div>
How can I make it look at its real size on mobiles? specifically ios
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 made a hotspot login site that has to work for devices with smaller resolutions / screens so my background has to scale with it. Now the problem is that is scales, but it sticks to the top of the screen. So when the resolution gets too small, there is a white void beneath the image. This is what is looks like: https://imgur.com/a/0jAprjJ
This is my CSS code for the background styling:
background-image: url("img/AngelntrÃĪgtGelb.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
What you can do is a media query for screen sizes less than, wherever it breaks and use this for your image size:
#media only screen and (max-width: 600px) {
body {
background-size: auto 100vh;
background-position: center;
}
}
Ehy there! Can anyone advise how to get the background image totally responsive regardless which device is on?
Or if the screen is on portrait mode or landscape?
Right now the image I have it covers well the iPad page when is in landscape mode, but is way too short when the screen goes on portrait mode.
This is what i came up with after having tried everything including height: auto; width: auto;
#home {
background-image: url('london-pic.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: auto;
max-width: 100%;
min-height: 720px;
overflow: hidden;
}
You defined min-height: 720px for some container, so this container won't be higher than 720px. To cover whole screen you should define e.g:
max-width: 100%;
min-height: 100%;
or
min-height: 100vh.
(use % if parent container have defined height, in other way use vh).
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/
http://graduateland.com/
How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.
Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?
Current CSS
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.
If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:
#container {
background: url(path/to/image.jpg) no-repeat center top;
}
On the site you linked they are appyling this CSS
display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.
You should particularly have a look at the background properties.
Here's the answer:
Responsive Images with CSS
CSS:
max-width:100% !important;
height:auto;
display:block;
Use #media, like:
#media screen and (max-width: 1280px) and (max-height: 1024px) {
.splash {
background-image: url('../img/splash-1280.jpg');
}
}
#media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
.splash {
background-image: url('../img/splash-1920.jpg');
}
}
In their CSS:
#media (max-width: 1280px)
[id="get-started"] {
background-size: auto;
background-position: center top;
}
Which overrides:
background-position: center center;
background-size: 100%;