the weirdest thing just happened, I had a problem I fixed with the footer and I accidently left the %sign after contain in my code. Take a look. My site is usahvacsupply.com
html, body{
overflow:auto;
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:contain%;
top: 0;
left: 0;
}
Without the % sign after contain it throws everything off. The % only satisfies for firefox though. Does anyone know a fix for all browsers? IE the % helps but throws off the top level navigation tabs. In chrome it is all out of wack. I'm pretty much baffled here so help would be appreciated.
Well, you have different background-position rules for the different prefixes.
If you'd like to use 'contain' as a value, try removing the % and then follow suit with the other rules.
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
Related
I'm developing a website and i'm having trouble with Safari.
I'm using a background-image: -webkit-linear-gradient that is working perfect on Chrome, Firefox, etc... but when it comes to Safari, the output is different.
It is showing only on half of the screen.
I'm using this style on the body:
body {
background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
background-size: auto 1200px;
-webkit-background-size: auto 1200px;
background-repeat: no-repeat;
background-attachment: scroll;
top: 0;
left: 0;
}
I've tried searching for a solution, but so far nothing seems to work. I've tested changing the background size to cover but it doesn't give the output i intend, as well as setting top: 0; and left: 0; as shown in other question around stackoverflow, but that didn't work too.
The link to the specific page i'm talking about is this one: https://dashiofficial.com/product/test-product-01
Does anyone know the solution for this problem?
Thanks in advance.
I have checked your website and was able to fix your safari problem.
It has nothing to do with the gradient you defined for body{} but with the background-size for .single-product{}
Try to change
.single-product {
background-size: auto 1060px;
}
to
.single-product {
background-size: 100% 1060px;
}
It works for me in Chrome and Safari (not tested in Edge or Firefox).
I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:
However when I check the site with my phone it displays the whole image distorting it.
HTML:
<header class="wide">
</header>
CSS:
body, html {
height: 100%;
}
.wide {
width: 100%;
height: 100%;
background-image: url('sebastian-unrau-42537-unsplash.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#media (max-width: 1199.98px) {
.wide {
background-attachment: scroll;
background-position: initial;
}
}
The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.
Now if I remove "background-size: cover":
It's kind of closer what I'm after but not quite. Am i missing something?
My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109
Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.
Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.
You could use this property :
background-size: x% y%;
The first value is the horizontal position and the second value is the vertical.
So you can try :
background-size: auto 100%;
I have a not so unusuall problem but either my google skills suck or I don't know how to ask and find solutions to my problem.
I am using bootstrap3 to build my website which looks fine on IE 8 except for a banner part.
The outer .row div is 100% with a background image covering the full with. Inside the div, I have a .container div has centered content leaving some space on both ends.
In all browsers except IE8, this design works fine but on IE, the background image only goes as far as the .container leaving white space on both edges.
Here is my css
.heading
{
background: url(../images/inner-heading-bg.png) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 50px;
min-width: 100%;
}
Please see attached image for IE
IE8 doesn't support background-size: cover; by itself, it needs a little push in the back.
You can use a polyfill like: https://github.com/louisremi/background-size-polyfill to get it working in IE8.
I'm having problem with stretching my logo within a desired logo size. Below is my Css3 code. it works fine with other browser except IE. Please use IE to view my problem. www.allwireinc.com please help.
h1.logo {
width: 145px; height: 120px; }
h1.logo a {
background: url(http://www.allwireinc.com/images/weblogo.png) no-repeat left;
-moz-background-size: auto 100%;
-o-background-size: auto 100%
-webkit-background-size: auto 100%;
background-size: auto 100%;
display: block;
width:100%;
height:100%;
}
Older versions of IE don't support that.
However, you could replace it with an img, and you could stretch that.
On its own, older versions of IE don't support that feature (and many others). You might try CSS3PIE and see if it works. Otherwise you'll have to decide whether or not you are willing to live with the limitation, or if you want to write some Javascript to take care of it for you.
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
You can use this code to make a fixed background layer to hack into this problem.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just changed the background size and background attachment to make the image static.
Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:
-webkit-background-size: 2650px 1440px;
(hat tip to commenter Mac)
I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.
I'm not that profi one, but I've solved this problem usin' jquery.
It's quite simple)
Here is the code:
jQuery(window).scroll(function(){
var fromtop = jQuery(window).scrollTop();
jQuery(" your element ").css({"background-position-y": fromtop+"px"});
});
next solution in Css:
body {
background-image: url( ../images/fundobola.jpg );
background-position: top center;background-repeat:no-repeat;
background-size: 1900px 1104px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
--- not use---- (cause: scroll disable )
position: fixed
Resolved in Ipad and iPhone
Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed . To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('imageURL');
background-repeat: no-repeat;
}