I am using Ionic and Angular to build mobile Applications.
I am now using Ionics sidemenu with a background:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
The Application can run on different screen sizes from smpartphones over tablets to desktops so i need to provide different image sizes.
Do i have to provide an image for each display size or can i somehow resize the background image on startup and set the resized version to be the background?
You could try #media css to display different image per view. For example:
#media screen and (max-width: 1199px) {
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
#media screen and (max-width: 767px) {
.menu.menu-left {
background-image: url('../img/menu_background_2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
Or you could just set correctly your css for the background like that:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
Related
I've been struggling with this one for a while, so hoping someone might be able to help me out.
I'm using WP Bakery plugin, and the page background images I set are really blurry on smaller screens. All looks fine on the Wordpress/Chrome visual editors, but on an actual phone/tablet the photo doesn't resize, so it's just a blurry mess. The CSS is as follows:
body {
background-color: #00657f!important;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
website address is 414kiting.com
Any help hugely appreciated.
I found the solution- this will surely work :), Can you please try this with media query :
#media only screen and (max-width : 767px ) {
body {
background-attachment: initial;
}
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
background-size: cover;
background-position: center center;
}
}
Lots of mobile browsers don't support
background-attachment: fixed;
Best way to solve this is to make a media query for tablet sizes and lower to make the background-attachment: scroll or initial and then try to simulate the effect or just discard it on mobile devices.
Edit: typo
I have a 4496x3000 image I am using for a background image. It's responsive until it get down to about 1190px at which time it's not. I thought maybe creating a media query and using a smaller image would help but it did not. What is wrong with my code that makes it stop being responsive?
body, html {
margin: 0;
padding: 0;
width: 100%
}
.bgimg {
width: 100%;
background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);
opacity: 0.65;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width : 1190px) {
.bgimg {
background-image:
url(../img/pexels-photo-medium-1280x854.jpeg);
}
}
<body class="bgimg">
I tried the code without media query and it worked well i.e. made my background image responsive. You should try using another (bigger) image and without using media query.
I encountered an issue on displaying a site when in mobile. The images background size that is set to cover works well on desktop but when in chrome android phone it won't get full screen. I know this was asked before and tried them but no luck for me.
What I tried is:
html, body {
height:100%;
min-height:100%;
margin: 0;
/* The image used */
background-image: url('../images/bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
I also tried adding media query to display smaller background image to fit mobile screen but no luck.
Media Query:
#media only screen and (max-width : 500px) {
body, html {
background-image: url('../images/mobile-bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
}
The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried.
<section class="girl-cover-photo">
</section>
.girl-cover-photo {
height: 730px;
background: url("../img/girl-cover.jpg") fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px) {
.girl-cover-photo .girl-cover-photo {
background: url("../img/girl-cover.jpg") relative;
}
}
But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?
instead background: url('../img/girl-cover.jpg') relative;
use background: url('../img/girl-cover.jpg') scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
.girl-cover-photo{
height: 730px;
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px){
.girl-cover-photo{
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') relative;
}
}
<div class="girl-cover-photo"></div>
Try this
I have the following CSS:
#section-one {
background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
#media all and (max-width: 800px) {
#section-one {
background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg') !important;
}
}
Now I was expecting this to change the background image when the browser width is <=800px
Nothing actually changes though, but if I right click and view image when the browser is below 800px width, it actually shows me the 800px width image?
Strange, why is this happening and how do I fix it? Here is the link should you need it:
http://176.67.174.179/ukcctvinstallations.co.uk
The only other CSS I have for #section-one I have is:-
#media all and (max-width: 880px) {
/* Section 1 */
#section-one {
margin-bottom: -49px !important;
}
}
you can create a picture in the standard sizes of screen like section-one.jpg (1440x900) and then use this code for your #section-one :
#section-one{
min-width:974px;
min-height:510px;
background:url(section-one.jpg) no-repeat bottom center fixed transparent;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
height:100%;
width:100%;
image-rendering:optimizeSpeed
}
Please try this code
#media only screen
and (max-width :800px) {
#section-one{
background: url(section-one.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
}