I integrated a fixed cover image on my website and it works fine: https://stadtpampa.de/4407-2/
Unfortunately it does not work on a mobile device. The image is not responsive and it is not fixed as well.
See mobile version
I tried to change the size with #media in the CSS:
#media(max-width: 768px) {
.wp-block-cover {
min-height: 300px !important;
}}
The size is okay then, but it is not fixed. Could you please help me with the right CSS code to fix the image on mobile devices?
Thanks in advance!
Instead of using background-image I'm just using background with short-hand properties. I also removed min-height: 300px !important; since its not necessary.
This should do the trick.
.wp-block-cover {
background: transparent url(https://stadtpampa.de/wp-content/uploads/2020/12/Schoenower-Heide-Auf-der-Aussichtsplattform.jpg) no-repeat top center;
background-attachment: fixed;
background-size: 400px;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
}
Related
Original look of the website on mobile
Now, when I apply a css code;
div.masthead-banner.data-bg {
background-size: contain !important;
}
I get this, On the mobile site the full banner appears with a lot of grey space above and below it:
After css fix is applied
However, I would've wanted the image to completely fill the div, is there a way I can achieve this? Thank you.
Website is http://naturessecrets.club
Better to reduce height of banner and make background-size: cover on it.
.site-title a {
font-size: 40px;
}
div.masthead-banner.data-bg {
background-size: cover !important;
}
Here is it
You can set the background-size to 100% but this will stretch your photo.
I would use different sizes for different devices. Just like this:
body {
background-image: url('img_test.jpg'); }
#media only screen and (min-width: 400px) {
body {
background-image: url('img_test.jpg');}}
You can use this css
#media only screen and (min-width: 479px) {
div.masthead-banner.data-bg {
background-size: cover;
height: 240px;
display: flex;
align-items: center;
}
}
As the title says, the issue arises only when viewed on mobile.
On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?
Site is live #
https://claritysalonspa.com
Any help would be appreciated!
I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.
.page-id-29 {
background-image: url(YOUR-IMAGE);
background-size: cover;
background-repeat: no-repeat;
height: 100vh; // add the height
background-position: 50% 50%; // center the image
}
so the solution is to add height: 100vh and also change the image position so it is centered.
Add this in your style.css
#media screen and (max-width:600px){
.page-id-29{height: 95vh;}
}
It's because your bodydoesn't have enough content. If you add more content then there is no trick needed.
You can overcome this by adding min-height to your body tag.
.page-id-29 {
background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 92vh; /* this for height */
background-position: center center; /* to center the image */
}
If you want to make your footer always bottom of the viewport please add thi also.
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 !important;
}
For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
I was looking for a solution to make my opening background image to be 100% of the viewport and after using Josh powel''s answer here Page height to 100% of viewport? it works on chrome on mac but not on any other browser (on mac or windows) When I say 'it works on chrome on mac', it works in most instances however if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content so it's like it only works for heights up to x...
here's my code:
<section class="intro">
<div class="intro-body">
</div>
</section>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}
.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}
function windowH() {
var wH = $(window).height();
$('.intro, .intro-page').css({height: wH});
}
Fiddle here http://jsfiddle.net/9h98f/1/
If anyone can shed any light, that'd be great.
In order to make an element 100% height of the page, you must also have:
html,body { height: 100%; min-height: 100%; }
It's much better and more reliably to do this in CSS than by using JS.
Alternatively, you could just put the background image on the body (with background-size: cover like you are using).
I a using the gridless CSS framework for my page.
Body element is used as a wrapper, and I have a background image for that wrapper, which repeats downwards.
Now the problem is, to make this image responsive. Here is the css
html {
height: 100%;
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color:#5FB7C0;
}
body {
margin: 0 auto;
min-height: 100%;
max-width:960px;
width:90%;
color:#fff;
background: url('../img/background.jpeg') repeat-y;
}
The background jpeg is 960 pixel wide. I thought of making a media query, which makes the background image as a cover when scaling down. I change also the same image but double height, so the background is not scaled up on height.
#media only screen and (max-width: 1100px) {
body {
background: url('../img/mobilebg.jpeg');
background-size:cover;
}
}
But now when I scale down, the background image is not scaled down to smaller sizes if the height is more than the width.
The problem is, the cover property looks that the height is equal to the image, but I need it to look that the width is equal. Also a background size cover which repeats y.
How can I make the image correctly as a repeatable? It can be fixed, but should always look like the picture, but without the spaces left and right if smaller size
Thanks so much!
Try this (I used 959 px, because 1100px wouldn't make sense If the image is 960px)
#media only screen and (max-width: 959px) {
body {
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
}
Fiddle that presents sort of what this does.
If your design is fluid, you can target lower resolution like
#media only screen and (max-width: 320px) {
body {
background: url('../img/mobilebg_320pixel.jpeg');
background-size:cover;
}
}
width needs to be managed a/c to business need.
Use This Code To fix your problem. Once I also stuck with the same problem and this code help me and I hope it will help you too.This will work surely.
#media only screen and(max-width:600px){
body{
background-image: url(satyam01.jpg);
background-size: cover;
background-position: center;
}
}