I am trying to set cover photo in wordpress home page.
Desktop version works fine, but tablet and mobile version just crop image in viewer, mobile even more that in tablet.
I want to have full size photo on all devices.
I am using astra wordpress plugin.
Is there css code that i can insert to get same proportion on all devices?
Thanks,
B.
I tried code i found online
html {
min-height: 100%;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
and it works for desktop version, but tablet and mobile still shrink.
Related
I was able to change the social media symbol in the navbar on Squarespace to an image in the desktop view. However, it doesn't change it on the mobile version. Here's the code--
.icon--fill:nth-of-type(4) {
svg {
display:none
}
background-image: url(https://static1.squarespace.com/static/5fce72d1a20acc7aeb8a51e1/t/626f0d9afd4cc6667ebbc5a5/1651445146440/Apple-Hover.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
It only goes back to the default image of links. Any ideas?
Good afternoon,
I'm new to webdesign.
I've added a background-image to my webpage.
I used the below CSS to achieve this:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
height: 100%;
background-image: url(link.jpg);
}
It is fine on desktop and tablet devices. However on mobile phones, not everything is showing.
I have a specific image for mobile devices, but I don't want to use it, because there is too much quality loss of pixels.
I want to use the same image, but it is not scaling down correctly.
I already tried adding a media query for mobile, with adding background-size: contain. Then the image is scaling down in the widht, but not the whole background is coverd. So that doesn't help either.
What can I do to fix this?
Thank you.
That's normal behaviour when using a landscape image on a portrait screen. The only thing you can do is, what you already tried. Add some media-queries for different screen resolutions, which adjust you image the way you thing it looks the best.
One idea for your case:
If you add a header and a footer to your website, it should be possible to show the background image exactly like you wish.
if you are ok with stretching image then you can use,
background-size: 100% 100%;
I'm setting up a new Wordpress site and am stuck on how to position my logo (header image)/background image. The photo below is how I want it to look & how it currently appears on a desktop. However, it gets cut off on mobile and I think it has to do with how I set it up...
My header image is actually transparent and what you see is the background image. So my question is, is there a way that I can position it properly on mobile devices too? Or, is there a better way to do this?
The reason I chose to set it as the background image rather than a header image is that I wasn't sure how I could get it to actually touch the top of the page if set as the header image.
If you want to see my actual website, it's here. I'm using the Brunch Pro theme.
Any help or ideas would be very much appreciated! :)
Add this css to active theme style.css file.
#media (max-width: 767px){
body.custom-background {
background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
background-position: 50% top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 70% auto;
}
}
The background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.
code
div#photo_break {
#include viewport-unit(height, 28vw);
background-image: url('<img>');
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
z-index: 99999;
}
website
As you can see in this picture, in Chromes simulatorthe picture is shown.
The size of the image is not really large, or is it?
Nice site. :D Let's try to solve your issue.
Make sure you do not have that CSS code inside any media query, since it might block that content.
You might also try to add a new media query with the same CSS you have just for mobile, like this #media (min-width: 481px) { }.
Clean your mobile browser's cache before loading the site again.
Your background image is 12,000 pixels wide. It takes a long time to load to, I would suggest making the background of a parent div black inside the header, then putting an image in of just the person as the background of the element within that container if that makes sense. Save your mobile users data!
mobileand tablet browsersdo not support background-attachment: fixed.
changing this, solved the problem
I have a background image on a local site that appears fine at desktop and when inspecting tablet/mobile devices in chrome. When site is loaded on mobile and tablet the background image appears incredible blurry to the point it looks terrible. Main image size is 1200px x 1124px. Any help would be great. CSS is posted below.
Thanks in advance.
background-image: url('../assets/Web_BGD.jpg');
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;