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;
}
}
Related
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%;
}
I'm trying very hard to resize my background images with my personal website: calebcharles.com.
I can't tell if this is something that needs to be done with a background-size: fix in CSS or if I need to create alternate images for media-query based fixes. I'm a new designer so please go easy! I'd sincerely appreciate a nudge in the right direction. Here is an example of one of the sections of my site:
h1.slide1 {
padding-top: 10%;
color: white;
background-image: url("images/rainbow.jpg");
background-position: 50%;
margin: auto;
padding-bottom: 10%;
text-align: center;
font-family: 'Amatic SC', cursive;
font-size: 400%;
background-attachment: fixed;
background-size: 100% 100%;
-webkit-background-size:100% 100%;
background-repeat: no-repeat;
}
full site is www.calebcharles.com. The backgrounds look awful on mobile devices. Please help!
What you have is a background that is spread to 100%. The background itself is a widescreen 1920x730 image while mobile resolutions are generally portrait.
Look into media queries and have multiple background resolutions pre-rendered.
.slide1 {
background-image: url('images/rainbow.jpg');
}
#media (min-width:768px) {
.slide1 {
background-image: url('images/rainbow-768.jpg');
}
}
#media (min-width:1920px) {
.slide1 {
background-image: url('images/rainbow-1920.jpg');
}
}
#media (min-width:2560px) {
.slide1 {
background-image: url('images/rainbow-2560.jpg');
}
}
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;
}
}
I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>
You could use background-size: cover;
.thing {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but why are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!
Nest your div inside the background div and set the height to 100%
I'm pretty new to css and I am working locally so I cannot provide the exact address, but here goes:
I am using the wpexplorer adapt theme which has a responsive layout. I set up the wrapper background in the style.css like so:
#wrap{
background: url(images/scribble-top.jpg) center top no-repeat #fff;
margin: 0 auto;
width: 1040px;
padding: 0 30px;
}
When I moved into responsive.css to start designing the other viewpoints I wanted to use a new background image for the wrap div in the tablet portrait view but for some reason the new image will now show up at all (just remains blank) and the style.css background appears again when I shrink it to the mobile viewports. Here is my coding:`
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 740px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {background: #000;}
#wrap {background: url(images/scribble-top-680.jpg) no-repeat center top #fff; width: 680px; overflow:inherit;}
.hp-highlight, .portfolio-item, .home-entry, #footer-one,#footer-two,#footer-three,#footer-four{ width: 155px; }
#home-tagline{ font-size: 21px; }
#search { text-indent: -9999px; }
.loop-entry-thumbnail{width: 35%;}
}
It should be noted that the new image is the exact width of the new wrap div size and that the height is not relative as it is just a banner-type image at the top of the wrapper thus should not interfere with wrap div height.
What am I doing wrong?
Thanks in advance for your help!!!
`
add !important after your background declaration like so:
#wrap {
background: url(images/scribble-top-680.jpg) no-repeat center top #fff !important;
width: 680px;
overflow:inherit;
}