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.
Related
I am using the following code to set a background image to my HTML:
body {
margin: 0;
background: url('images/lightning.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
But the image did not show up entirely on the screen so I tried the following solution:
https://jsfiddle.net/507w9yoa/ which doesn't work as well.
Could someone please help me set the background image without adding the scroll bar or cutting off the images? I have tried all solutions available here and other site but nothing seems to work.
contain
contain will maintain the aspect ratio and fit the screen either vertically or horizontally. It will not crop the image but therefor not fill the entire background unless the aspect ratio is the exact same.
body {
margin: 0;
background: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg') no-repeat center center fixed;
background-size: contain;
}
Try this out: I just used 2 different units in background-size and now image works as for the screen size, image doesn't gets cropped and fills screen. I tried different screen and it worked fine for me.
body {
background: url('https://i.postimg.cc/1tcWpbZY/pexels-plato-terentev-5822191.jpg');
background-repeat: no-repeat;
background-size: 100% 100vh;
}
Try below
body {
background: url("https://upload.wikimedia.org/wikipedia/commons/d/dc/Standard_time_zones_of_the_world_%282012%29_-_Pacific_Centered.svg") no-repeat;
background-size: 100vw 100vh;
}
This might stretch weird but won't add any scroll bar and won't cut your image.
I am using a background size cover for an image I want to display in my homepage full screen when you enter the site.
.image1{
background: url(../img/nike.jpg) no-repeat center center;
width: 100%;
padding: 20px 10px 60px 10px;
height: 100vh;
overflow: hidden;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
However, since the image is really wide, I want it to be all in the screen when you enter the site with a phone. That´s why I have used the following media query:
#media (max-width:600px) {
.image1{
width:70%;
background-size: contain;
}
}
That is working and now you can still see the full image in mobile screens. But obviously it is not filling all the background. It has white space above and below it. So what I want is the text and logo I am going to put to appear in the white space above the image, and not in small size inside the image. I don´t know how to do this since the text and content I am placing is originally inside the div with this image as a background.
The only solution I can think about is to set the margin-top in the media query to -200px but I don´t think this is a very good practice.
You can see the site live in www.text.hdeprada.com It is a simple page with just this issue I am trying to fix.
use backstretch js , it will resolve your problem. Its easy and reliable.
Try scaling the image inside the div with this
background-size:200%;
scale the % to fit your need
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'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>
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.