I am using the Tesseract theme from tyler.com and I am using the visual editor to set a fill background image. The background image seems to look ok in desktop, but mobile seems to not be scalong properly. http://kingsmanarms.us is the website. Should I use a class and media queries to target different devices? I read something about -webkit. Please help
In that case you should media query, and your background attachment should be fixed, try this and in your mobile the background will be good to look :) since your div has set to static we should use '!important' for this.
#media all and (max-width: 480px) {
.panel-row-style {
background-size: inherit !important;
background-repeat: no-repeat;
background-attachment: fixed;
}
}
Related
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 am trying to get the header image of my new website (using WordPress) to resize automatically dependent on what type of device I am viewing from. I have tried to implement additional CSS from other people's suggestions but nothing seems to work for me. When viewing on a desktop, I am happy with how it looks but viewing from a phone does not look good.
Please help! My website is:
maximizingchange.com
Thank you!
As per your code, you are using background-image for your header. Try adding the below lines in your additional CSS section to fix it.
#media (max-width: 991px) {
#masthead.header-image{
padding: 30px 0;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-position: initial;
}
}
Have you tried to use:
width: 100vw;
height: auto;
This will make your image with 100% of the width of users device.
If you are using bootstrap then adding a class in <img> will make the image responsive. class = "img-responsive" . You can add a class over this and set your max-width.
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;
}
}
I have a wordpress site and using Twenty Seventeen theme, I like the scrolling feature on the Front Page Sections, just like in this demo:
https://2017.wordpress.net/
Now I am trying to get that scrolling feature to work on mobile, however when I look at the CSS I found this
.background-fixed .panel-image {
background-attachment: fixed;
}
But I know background-attachment does not work very well on mobile. Does anyone know of a work around, everything I have found and tried online does not work.
You need to write above css in your style.css file. we have to set background image fixed not a scroll.
.panel-image {
background-attachment: fixed;
}
Try to select only for one class ".panel-image" using media-query like this:
#media screen and (max-width: 768px) {
.panel-image {
background-attachment: fixed;
}
}
To make background scroll set the background attachment property to fixed
.background-fixed .panel-image {
background-attachment: fixed;
}
To make it work on mobile you have to place above CSS in media query or copy paste the below code in your style.css
#media screen and (max-width: 768px){
.background-fixed .panel-image {
background-attachment: fixed;
}
}
Is not working on mobile because the theme only enabled this on desktop. To work on mobile, add this custom css:
.background-fixed .panel-image {
background-attachment: fixed;
}
This way, on every breakpoint the effect will be applied
I want to get the background to be dynamic, proportionally re-size, and fill in the whole background instead of simply covering half of it like it is now on any mobile platform.
I'm an absolute novice at web design and am going through a merchant website. I thought I had figured out my website, but I completely forgot about mobile views so it is a mess in that area. I have tried media queries, viewport things, and more to no avail, so I feel like there was something default preventing them from working.
Website: http://www.reliefinsleep.com/
Thanks so much!
background-size: cover; will achive what you are looking for. This stretches the bg image to the size of the viewport cropping the edges rather that squashing it.
#media all and (max-width: 699px) { /* max-width would be the breakpoint for when this style kicks in */
body {
background-size: cover; /* stretches to size of viewport */
background-position: center; /* center the bg image */
}
}
You can also use percentage, pixel and em values for the background-size property. See MDN