Here's the CSS. I tried the shorthand that is commented and the long form and none work in IE. I'm even using the latest version of IE. For some reason the image won't display. I tried with multiple images, even just jpgs.
main{
/* background: url(../images/mosaic-min.png) repeat fixed center center;*/
background-image: url(../images/mosaic-min.png);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}
I know there is a bug if you don't have a space by the url and the next declaration in the shorthand, but there is a space there. Not even the long form works, though. It is a very large area to cover with the image. Maybe IE automatically prevents this?
Related
This is regarding a landing page with a full screen image background.
link to Codepen project
On this pen to replicate the problem, resize your browser screen to a mobile width and hover over the text 'leasing' you will notice a large gap on the bottom of the screen.
I tried to solve this using the following styles:
html, body {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
When I run this as a local file, instead of a gap on the bottom
there is a doubling of the image at the edge of the browser screen. Also in chrome browser the css is not loading in as it should
and there is a flash of plain black text for a few seconds until the css loads in.
I read about techniques for image optimization on stacked overflow and having different image files for different media queries and srcset, but I do not think its related to that, I think its a bug somewhere in the css.
Here is the full page
https://github.com/KravMaguy/flyer1
Any help on how to fix these css bugs is greatly appreciated.
The problem was fixed by changing it to the following css :
html {
background-image: url("https://greatofficespaces.net/wp-
content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");
/* Full height */
height: 100vh;
width: 100vw;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
specifically removing the word 'body'
the previous css class of body, html {styles etc...} applied the same styles to both the html and the body, When I removed one of them I no longer saw the double image in the corner of the browser, implying that the background was assigned to both the html and the body, producing the doubled image and incorrect css loading. This is my guess as to why this was happening and has been resolved.
I came upon a problem while designing a jumbotron for a website.
It's outside the container. Created a background for it, set background-size to cover, worked great.
When I opened the front page on a wider screen, the jumbotron became larger and there were gaps since the background image was too wide.
I then tried background-size: 100% 100%, thinking the image would stretch. No changes. Thought I perhaps had a margin/padding issue. No changes again.
Is this a problem with the image or the jumbotron? I'm not sure how to solve this. No matter what image I pick, it behaves very differently on different devices.
Behaving differently on different devices is not a bug, it's a feature. Having said that, try this...
background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
If you want the image to stretch to fit the full element (even if it means losing proportion), you need to set background-attachment to fixed and the background-size to 100%. Like:
.jumbotron {
background-image: url(image.url);
background-size: 100% 100%;
background-attachment: fixed;
}
Working example:
https://jsfiddle.net/4w9u7m1a/2/
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
I want to position a background of an label element to the left but it is never on the left in ie9+.
My code is similar to this
label {
background-image: url('some-image.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
This is working in all the browsers but (of course) in the ie9+, strangely it is working in ie8.
I hope someone can help because I can't simple position it fixed with a negative background offset.
I got the solution. It was related to the SVG Images I was using in newer versions of IE and Safari that caused the error. It seems that SVGs always have a with of 100% even as backgrounds.
So If you need to positon an image for eg a checkbox or radiobutton like me, you should have a fallback to PNGs for such Browsers.
I have this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/