What's this?
And how do I get rid of it? Actual webpage here.
Remove min-width: 640px from your .singleinfo css class
The min-width for the singleinfo class is set to 640px while the backgroundimage is only 630px wide. You can set no-repeat on the background or change the min-width to 630px.
It's the background of div.singleinfo repeating. To get rid of it, add no-repeat to the background property, so it becomes:
background: #F7F7F7 url(images/macmet.jpg) bottom left no-repeat;
Apart from defaulting to a repeating background, you've also set the background colour inconsistent with the remainder of the page.
.singleinfo { background: #F4F4F4 url(images/macmet.jpg) bottom left no-repeat; }
Appears correctly in Chrome 11 on Windows.
Change your style.css to get this:
.singleinfo {
background: url("images/macmet.jpg") no-repeat scroll left bottom #F4F4F4;
font: 12px Georgia,Arial,century gothic,verdana,sans-serif;
margin: 0;
max-height: 20px;
min-width: 640px;
padding: 5px 0 15px;
}
This fix was tested and works OK on:
Mozilla Firefox 4.0.1
Internet Explorer 9.0.8112.16421
Opera 11.10.2092
Google Chrome 11.0.696.60
change the background property of your class .singleinfo to >
background: url("images/macmet.jpg") no-repeat scroll left bottom #F7F7F7
Related
I have a body background size set. It works well as intended in android and windows. The size of background is okay there. But when loading my site on iphone the background size specifically the height looks too big to be 5%. background-size: 85% 5%; So the width is 85% of the body and height is 5% of the body but the height looks 50% of the viewport which is weird. Why this is happening only on iphone. Adding webkit prefix won't work I think. Is there anything wrong with ios and safari ...? Am I missing anything ...? Help me to fix this if you know what's going on. Thanks in advance ...
CSS
body
{
background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
background-repeat: no-repeat;
background-position: top center;
background-size: 85% 5%;
}
How browsers calculate the body background height ..? Other browsers are taking viewport height but in iphone the parameters are not matching up ...
The way you used fixed is a shortcut for background-attachment: fixed;.
This property isn't well supported. Check Can I Use to know what's the current support.
A fixed-position element with a height set to 100% behaves just like the element with background: .... fixed; property.
So, instead of having a property on body you should create a div this way (see the one with background class):
<head>
<style>
.background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
background-repeat: no-repeat;
background-position: top center;
background-size: 85% 5%;
}
.long-div {
height: 100vh;
}
</style>
</head>
<body>
<div class="background"></div>
<div class="long-div">Scroll down to see it how it behaves on scroll 👇🏻</div>
<div class="long-div">Here you are at half of the scroll 👇🏻</div>
<div>Here you are at bottom of the scroll.</div>
</body>
You can find a well documented article on CSS-TRICKS The Fixed Background Attachment Hack.
For iPhones safari, I think you have to add background-attachment in the media query
#media (max-width : #iphone-screen){
background-attachment: scroll;
}
I have a gradient background in an html document defined as such in CSS:
body {
/*background-color: #1A0F0F;*/
/*color: #D7D7D7;*/
/*height: 100%;*/ /* come back to this */
margin: 0;
background: -webkit-linear-gradient(green, black);
background: -o-linear-gradient(green, black);
background: -moz-linear-gradient(green, black);
background: linear-gradient(green, black);
background-repeat: no-repeat;
background-attachment: fixed;
}
The background gradient is definitely there, but it does this annoying thing where when I scroll, the gradient disappears on the bottom rectangle and it is just white- Specifically, this is on a Mac opening up the document on Google Chrome but it also seems to happen on Safari.
Any ideas what would be causing this?
The reason this is happening is because of overscroll (or "elastic scrolling") in OSX.
You can't give the overscroll area, which defaults to white, a gradient colour. But you can however style it with a solid colour.
Simply set the background property to style the overscroll area, and use background-image to set your gradient, like so:
body {
background: black;
background-image: linear-gradient(black, green);
}
This is a bit of a hack and unfortunately only really helps with either the top or the bottom of the page, but should look less jarring than white.
It's worth noting that this is only a requirement in Google Chrome, Safari should respect the background gradient during overscroll.
I just came across this issue, after some googling I saw this codepen: https://codepen.io/kidd1118/pen/qxQwvE and decided to have a go at something similar myself.
Ultimately, using a fixed element helps, in this case I applied the same gradient to a fixed pseudo element and fixed it to the top with 100% height and width, with a lower z-index.
This works great on Chrome 108.0.5359.124 on my Mac, and IOS Safari 16.0 on my iPhone, however the issue persists on desktop Safari 16.0
html {
box-sizing: border-box;
position: relative;
&::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--body-gradient);
z-index: -1;
}
}
body {
background: var(--body-gradient) no-repeat;
}
.icon {
background: #F0F0F0 url('../images/assets/user.png') no-repeat center left 10px;
background-size: 24px 24px;
-webkit-background-size: 24px 24px;
}
The above CSS works fine in all of the major browsers, but when I view it on any mobile device (HTC, Sony Ericson, Samsung, iPhone etc) the background CSS does not display, not even the color of the background. However, when I remove the 10px in the background-position style - it all works.
I have tried replacing 10px with em and % but it doesn't help the case. Any thoughts or suggestions?
The background property can only take a horizontal and vertical position—in your case center andd 10px—but you have specified three position values. This is why it works when you remove the third value.
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
This is my first time posting here. I have a problem. I've been trying for ages to get multiple background images to work in both Chrome/Safari and IE. Of course it works in all browsers except IE.
This my code:
#container {
width: 828px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
overflow: visible;
background-image: url('images/body.png'), url('images/filler.png');
background-repeat: no-repeat, repeat-y;
}
The reason I am using two background images is because I want the illustrated part to stay at the top, and have the white page background in the same div layer repeat when more content is added.
Right now this code works perfectly in Chrome, but NEITHER of the background images show up in Internet Explorer.
Help?
If it´s possible I suggest you use two container elements.
HTML
<div id="container">
<div id="inner-container">
</div>
</div>
CSS
#container {
background: url('images/filler.png') repeat-y;
}
#inner-container {
background: transparent url('images/body.png') no-repeat left top;
}