Community Forums › Forums › Archived Forums › General Discussion › Unresponsive Background Image
- This topic has 8 replies, 2 voices, and was last updated 8 years, 2 months ago by raziel0315.
-
AuthorPosts
-
January 29, 2016 at 5:31 pm #177871raziel0315Member
Just as the title says. The images aren't changes size to adapt to different resolutions.
Anyone know how to solve this?theoddspoon.com
Genesis/SampleThanks
http://www.theoddspoon.comJanuary 30, 2016 at 3:19 am #177893Brad WestMemberPerhaps adding
background-size: cover;
to your .custom-background class will get you sorted?
body.custom-background { background-image: url('http://theoddspoon.com/wp-content/uploads/2015/08/dual-screen-ice-cover-mountain-2880x9001.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; }
January 31, 2016 at 6:39 pm #178003raziel0315MemberI assume you mean I should place this code in the style.css.
I looked through the whole thing, even did a search.
body.custom-background isn't there, neither are any of the commands you listed in that method.Should I add the whole thing?
January 31, 2016 at 6:48 pm #178004raziel0315MemberI think part of the problem is how it reacts on a mobile device, too.
If I look at the same site on my phone, the image isn't fixed anymore, like it should be.
It's supposed to stay in place as the viewer scrolls down the page.
If I scroll down on my phone, I get a lot of white space instead.January 31, 2016 at 7:04 pm #178006Brad WestMemberIt looks like you're using the Genesis Super Customizer to inline the styles. To "inline" your styles means that instead of those styles being in style.css, they are in the head of the document. I've never used this plugin, but I suspect you can change the background image CSS inside your customizer.
As for the differences on mobile devices, you'll want to read this: http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios/23420490#23420490
January 31, 2016 at 8:08 pm #178007raziel0315MemberThanks for the response.
I added the code you suggested. The image doesn't change resolution to fit other devices.
My gf's computer screen is a bit smaller and the image looks like shit on hers.
I just added Genesis to another site of mine, without any plugins, and the problems persists.
So, it can't be the plugins.I don't know what you mean by changing it "inside" the customizer.
As for the link you posted, I don't understand. It's just an image. Why should it be so different fixed vs scroll?
Thanks
January 31, 2016 at 8:57 pm #178010Brad WestMemberPer the Stackoverflow link above, you are unlikely to get a background image to remain fixed on a mobile device. I'll let you read the explanation in the link to understand why.
The customizer is a visual editor built-in to WordPress. It allows you to see changes you make to your website as you make them, that is, without needing to save files and refresh your screen. The plugin Genesis Super Customizer uses this to add styles to your site. The CSS that is controlling how your background image is displaying is being added by this plugin to the head of your HTML document (on line 292). If you navigate to the customizer inside your WordPress dashboard you should be able to find the custom-background class which is where you'll want to make your edits. I'm not sure the effect you're after so I'm just guessing that adding background-size: cover; might display the image as you want.
If you could be more specific about how you'd like the image to display, I might be able to offer more specific suggestions. But regardless of the changes, they will be made to the .custom-background class.
February 1, 2016 at 12:09 pm #178071raziel0315MemberShouldn't the image adapt to different screen sizes?
I set up the site on my home computer, and I used a certain image of a certain size, with a certain look.
It looks really good one my computer. Shouldn't it look equally as good on a different computer?
Hardly anyone is going to have the same screen size that my monitor has. So, the image should adapt, like zooming out.
The Super Customizer doesn't customize the background. That's all in the theme.
I looked for what you were talking about in the plugin itself, and there's nothing there for the background.As I said yesterday, "I just added Genesis to another site of mine, without any plugins, and the problems persists.
So, it can’t be the plugins."I suppose I'll have to get my money back and use a different theme.
Thanks
February 1, 2016 at 12:48 pm #178077raziel0315MemberThe problem has been solved, with a plugin, and little of your help.
I found a plugin titled: add background size.
It seems to have done the job.
It gives the extra option for the background size: cover.
I figured that's the one that would work since you mentioned it.The mobile version looks a little better, but still looks like garbage.
Not much to do about that, but, thanks.You can really see a difference on my other page, http://www.halloweencrossroads.com
I still have the issue with my site title going all squirrely on the odd spoon.
I did another post for it. If you have any ideas, I would appreciate the help.Thanks
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.