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
}
Related
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
I have a 3051 x 1716 pixel image.
When in mobile I want to view it like the following without cropping the image and uploading it second time:
I mean I just want to change the horizontal center of the image and change the width according to sceensize given it is a mobile screen.
How can I do that?
You could do a media query on a background-image like below, but its actually not best practice: only load what you really need on mobile devices to get faster pageloads. And don't use background images to display important content... so you might wanna look into using the picture tag and responsive images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
However, if two seperate image files are not an option, here is a solution:
.container {
background-image: url("https://images.unsplash.com/photo-1615731364858-99013ac4fad3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80");
background-size: cover;
background-position: left;
height: 100vh;
width: 100%;
}
#media only screen and (min-width: 600px) { // set to your mobile view breakpoint
.container {
background-position: center;
width: 100%;
height: 300px; // or whatever height you want
}
}
<div class='container'></div>
Can you please check the below code? Hope it will work for you. If you will take an image as a background image then you will be able to set the position of the image as per your requirement. We have used background-size and background-position properties to adjust the image.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xhsb7ocL/3/
.banner-bg {
background: no-repeat center center / auto 100%;
position: relative;
display: block;
width: 100%;
height: 400px;
}
#media screen and (max-width: 767px) {
.banner-bg {
background-position: left center;
}
}
<div class="banner-bg" style="background-image:url('https://i.stack.imgur.com/Y3Wi7m.jpg')">
</div>
//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 have a big background image, but the image is not good in small mobile browser. It displayed a horizontal scroll bar and the image is crop.
The image should be:
The 3 person in the image should be display in the center
No scrollbar
How to fix this?
CSS (responsive)
.header-home-div{
background: url(/testEnvironment/files/homepage-header-mobile.jpg) !important;
height: 700px;
width: auto;
I tried to use this:
background-size: cover !important;
background-position: center top;
but it's not working
Here's the link
I use this to test the responsiveness of the image
On the mobile size, you use an !important to the background property. So you need to use !important for setting a size too like this :
#media screen and (max-width: 992px)
.header-home-div {
height: 1500px;
width: auto;
background-size: 100% !important;
}
It's better to remove the !important property at first instead of overwriting it with the above fix by the way.
The horizontal scrollbar depends on .header-home-h1 margin. The following should fixed it :
#media (max-width: 520px)
.header-home-h1 {
text-align: left;
margin: 0;
width: 100%;
font-size: 2.25em;
}
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%;