I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
Related
Afternoon Stack overflow,
My issue is with my website here
I'm using a module for the background image which works perfectly well on desktop computers and ipads, When a mobile user looks over the website, The background image which is maxed at 4000px stops and displays a white background instead. I've tied #media fixes but have had no luck. The only fix i found overlayed the content area remove the dripping effect at the top.
Device comparison
Thanks again, Steven
Solution:
1- Give background:#000; to the body in mobile situation(media query)
body {
background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
}
2-Give background-size: cover !important; to the body in mobile situation(media query)
body {
background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
background-size: cover !important;
}
You could just give
#content { background-color:#000; padding-bottom:30px; }
and remove
footer { margin-top:30px; }
Gives the same visual effect as if the image had covered it all.
Your background is just not responsive that is the issue here.I suggest trying to fix your backgound image
background: url(http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Try putting this on your site
As you can see it picks up the image and its responsive and everything in the background is responsive.
Just play around with your background image make it smaller since its cutting in half ways from top to bottom
EDIT:
Your image is 1920x4252 ,make it 1920x1080 or something similar.
I am having trouble setting my background image to where it is centered on the screen as you scroll down on a mobile device.
Currently, my website's background when scrolling on my desktop is as how I want it to be. The problem is on mobile devices and for some reason when using dev tools to view the site on mobile resolutions it works great but when it comes to real practice, it does not work.
Can anyone please help me figure this out?
My current code is:
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
}
My website is: test.ebdesigns.us
(wordpress platform)
Also, when viewing source-code something is producing this and do not know. This might be affecting it.
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.test.ebdesigns.us/wp-content/uploads/2015/07/NewColumbis51Logorev101.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
Actually some plugin is sending this "body.custom-background" your CSS, but this is not the case
Change your code to say > background-position : "top center", instead of "center center". That will do
**If you want to preserve the center center you have to provide a height to your main container(body)
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
height:100vh;
}
Cheers. joy
I am trying to implement the following design:
I am having trouble with the red stripe that runs across the page, I'm not sure how to implement that..
I though of using background images, one in the header and one in the right sidebar. The problem is I don't know how to make it so that the stripes connect to each other.
What I tried:
.header {
background-image: url('../images/header-background-2.png');
background-repeat: no-repeat;
background-position: center bottom;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.sidebar {
display: block;
background-image: url('../images/sidebar-tile.png');
background-repeat: repeat;
background-position: center;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
But it doesn't work.. You can see the result here
Any idea how to implement this?
I realized that it would be too difficult to implement this design on a fluid layout. So here is what I did:
on width < 1030, I implement another layout, not in the scope of this question.
For screen widths greater than 1030px, I set a max-width on my content. I now have a fixed width layout that will make it much easier to implement the red stripes.
Here's my code:
.wrap { max-width: 1030px;}
And apply the wrap class on my inner-header, inner-content and inner-footer.
Then:
#inner-header {
background-image: url('../images/header-background-1030-3.png');
background-repeat: no-repeat;
background-position: center bottom;
}
#inner-content {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
#inner-footer {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
Note that my background images all have a width of 1030px.
There's no resize problem anymore and the layout keeps in place nicely.
Try creating that image by making a 1x1 pixel in that color ie., rgb(194, 39, 45). Then you can use this image and CSS for the (straight parts) of the background (ie, where the curves are not placed). You can also use CSS entirely by creating divs and border radius (radii?). A 1x1 pixel repeated using CSS is better for a background image bc it will look the same on any device.
maybe i don't understand your question, but if you want the website to be readable in various devices and window sizes; why wouldn't you use divs and style rules?
First let's divide the red part into the first curve at the top left, the menu, and finally the last curve/rest of the red bar. In on div create the first curve as an image, using photoshop or any other photo editor. Then in the next div create the menu bar, with the same red colored background. Finally do the same thing as you did for the first curve to the last part. Use a photo editor to to draw it out as a jpeg and put it into the div. Use css styles to order the divs in place.
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards
I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:
body {
background-image: url('/cheri/image/background.png'),
url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:
http://img198.imageshack.us/img198/4560/screenshot20120916at851.png
I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.
Thanks for any help!
Use min-height: 100% on both html and body:
html, body { min-height: 100%; }
DEMO
It creates no issues when you have enough content to cause scrolling.
DEMO
Set the HTML element as well:
html {
background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}