I've tried a couple things, but nothing has fixed my issue. On iOS, a white bar is showing to right of the site cutting off some of the content. Help?
http://qusik.com/newsite/
Thanks in advance!
I rechecked your site, your ipad image and its container is way more wider than your other containers, try to reduce its size to 960-940 width
You're probably seeing that white-space due to the fact that your content is overflowing your viewport as the page is shrunken on your tablet/mobile device, one way to fix it would be to remove that background image and color from your header and creating a .bg div with it instead and positioning it absolutely (stretching it in all directions, e.g. top:0; right:0; bottom:0; left:0;), relative to the body so it will stretch in all directions in your screen, like so:
.bg {
background-color: #000000;
background-image: url("images/tint_blue.png");
background-position: 50% 0;
background-repeat: no-repeat;
border-bottom: 1px solid #FFFFFF;
position:absolute;
top:0; left:0; bottom:0; right:0;
z-index:-1; /* to place it behind everything else, just make sure not to have bg colors on your page elements */
}
Another (while very unorthodox) method is to place your bg image and color on the html tag instead, like so:
html {
background-color: #000000;
background-image: url("images/tint_blue.png");
background-position: 50% 0;
background-repeat: no-repeat;
border-bottom: 1px solid #FFFFFF;
}
Related
I have different size background images in width and height (800x1200 600x800). I want to resize the image to full size without distortion to fit into the div. Can anybody tell me how to implement this in css. I have tried below ways but it is not occupying the full div width. can anybody tell me how to do this?
.example1 {
border: 2px solid black;
padding: 0;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the two options you have. If a distorted image doesn't disturb you, you can set background-size: 100% 100%;
Try below code and check
.example1 {
border: 2px solid black;
padding: 0;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Hi i know the best way to do this without compromising with quality of image.
just give position:relative; to that div for which you have to make backgorund.
and take the desire image into the div and give the image position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover;and lastly give your image z-index:-1;
I hope it will work.
I'm using bootstrap and I have this problem only when I'm on a mobile browser, when I resize my desktop browser the background resizes and works without any white extra white space.
I also have a navbar at the top that gets truncated by the mobile browser but not on desktop.
In the css I have background-size: cover; background-position: center; html { height: 100%}
I also tried adding width 100% to html but nothing changed.
I have no idea why this isn't behaving like it is on desktop. This is the site: https://cantuga.000webhostapp.com/udm/startup/startup.html
remove width: 400px; from below class
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
I think you are talking about the overflow.
html,body{
overflow-x:hidden;
}
How can I fit website background to the browser's height?
Here is my CSS of the background code.
#header {
position: relative;
background: url(girl.jpg) no-repeat fixed center bottom / cover transparent;
text-align: center;
}
I don't want to set height:100% for the image because I don't want the long scroll down. I want neat fit background to my browser's width. Any help?
http://i.stack.imgur.com/w1k18.jpg <- Here is the link to website screenshot.
try this
body
{
background: url(girl.jpg) no-repeat fixed center bottom / cover transparent;
}
add the above css code in your css file...
This may be a stupid question but I am trying to set a static background image onto the body of my site but I don't want to repeat the image. I have this:
body{
background:url(../assessts/BG.png) center bottom no-repeat,#000;
background-size:100% auto;
}
Which doesn't show the image at all, however if I remove the no-repeat:
body{
background:url(../assessts/BG.png) center bottom,#000;
background-size:100% auto;
}
This shows the image fine. The image is quite large anyway and fills my 19 inch screen well without the no-repeat option. But as a fail safe for very large screens I would like the image not to repeat.
Where I am more confused is I have a div later on in the CSS that using a similar method:
.head{
position:absolute;
z-index:1;
top:0px;
background:url(../assessts/logo.png) center -60px no-repeat,#000;
background-size:300px auto;
width:100%;
height:200px;
display:block;
box-shadow:0px 4px 4px #000;
-moz-box-shadow:0px 4px 2px #000;
-webkit-box-shadow:0px 4px 2px #000;
}
But this works with no errors. If I'm not mistaking it is the same?
Have you tried rearranging the order of the properties, i.e. background: #000 url(../assessts/BG.png) no-repeat center bottom; See W3C notes on shorthand property order.
I have a background image covering the entire width and height of the browser screen. It works in chrome and IE but in Firefox the image is being pushed down. Any ideas what's happening?
/* CSS */
<style type="text/css">
#bg {
position:fixed;
top:0;
left:-50%;
width:200%;
height:75%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
</style>
/* HTML */
<div id="bg">
<img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/BMW_528_bkg.png" id="back1" alt="" />
</div>
You should try the following to make the image fullscreen:
html {
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;
}
For details, have a look here.
Justin first of all, by definition a BACKGROUND image, is set via CSS and not inline as you do it. So, a first solution is rather simple:
#bg {background: url("images/yourimage.jpg") no-repeat center fixed;}
It will put your background in the center, and there you go. the #bg acts as a wrapper for the rest of your content/markup.
Now if you want your background to automatically resize depending on the browser window, there is no way to do it if you can't use CSS3.
ps: note that you can fake a background taking the whole screen by photoshoping a very long and wide image that will repeat a background color, and by using the background shorthand like that:
#example { background: #fff url(image.gif) no-repeat; }
So if your car image is covered by a white background color, it will be ok not only for the original image resolutions, but also for bigger ones as the white color will cover the browser window.
Please comment if you have more specific needs.
If you can't use CSS3 - change following code
#bg img {
position:absolute;
top:-50%;
left:0;
right:0;
bottom:0;
margin:0 auto;
min-width:50%;
min-height:50%;
}