I am trying to apply a full screen background image on one of my projects. It works fairly well in IE9 and Firefox but I´ve been struggling with an issue on Chrome because it adds some 1px border to the top and left.
Screenshot: here
I tried to apply border:0; but still nothing.
<img src="./images/highway.jpg" class="background-image" alt="background-image" />
img.background-image {
/* Set rules to fill background */
min-height: 100%;
min-width: 960px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.background-image {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Anyone has an idea of what might be causing this? Would appreciate :)
I have the same problem, it is a bug of Chrome, they know that bug, but I think Google won't repair this bug, more than 10 versions since the bug appeared and they still didn't repaired...
If you change the size of the window magically the 1px dissapear (and reapear, depending of somethig inside Chrome)...
Try to put background-attachment: fixed, sometimes it resolves this bug (but your background loses the scroll movement).
Related
So I noticed something peculiar while working on a personal project just now.
The following code will cause an issue with the position of the div element in portrait mode if the phone is switched back and forth between orientations.
Instead of the div sitting fixed or flush to the bottom of the screen, the div will float above and not touch the bottom of the screen at all.
html {
width: 100%;
height: 100%;
border-bottom: solid blue 3px; box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
box-sizing: border-box;
border: solid black 3px;
background: white;
}
<div></div>
While troubleshooting this issue, I discovered the following things:
If you change the height of html from 100% to 110%, the issue resolves itself.
110% is very likely not the exact "break" point, but I do know that the div will not touch the bottom of the screen even if the height of html is set to as much as 105%.
The dimensions of the square do not matter too much. I've tested at 10px, 50px, 100px, and 200px, and it disappears completely if set to 10px, but behaves the way I've described above for all the other values.
Notably, I am testing this on, not an iPhone 6s, but a plain iPhone 6.
I encourage other users to test this for yourselves and share your experience!
Does this bug exist on other devices? In other iOS versions?
Is there any way to fix this other than increasing the height of html to 110%?
"overflow-x: hidden !important;" was causing an issue where the browsers side bar was getting cut off (overlapped). Removing this fixed that error, however, one and only one of the pages Header is running off the screen when viewing in mobile. Here is the code, changing the position from fixed to absolute fixes the issue but i need the header to be fixed. In Desktop view, everything is fine. only in mobile and only on one page. Its strange. Here is the code responsible for the size of the screen i am having issues with.
#media screen and (min-width: 321px) and (max-width: 759px){
.navbar-mj{
position: fixed;
width: 100%;
top: 0px;
z-index: 89;
background-color:#6782af;
margin-bottom: 0;
}
}
It's a little difficult to tell what your issue is without seeing a more complete example but what if you remove the width: 100% and then add right: 0 and left: 0?
try lower the (max-width: 500px);
it may help you instead of overflow the screen of the mobile view.
thanks
I am trying to add a fixed element to the bottom right corner of my webpage, which I have done with success.
I have also limited it's width with max-width: 30%; so in mobile devices it does not show the image too big. What I want to do now is to adjust the image by screen height as well. Is there anything else to figure this out except for Media Queries?
HTML:
<div id="cornerImg">
<a href="my-site-link-here">
<img src="image/source.jpg" />
</a>
</div>
CSS:
#cornerImg {
position: fixed;
bottom: 0;
right: 0;
max-width: 30%; /* Already working as expected */
max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}
So I get the image resized on the screen, but it does not actually change the size of the image when it goes under the max-height condition. It just shows the top of the image and leaves the rest of the image invisible.
I know how to make this as Media Query, but I am seeking for a non-MQ solution here, if it is possible in any form. Thank you in advance!
EDIT: If any Media Query solutions come up, please provide some advice on that as well. It seems that even though I can adjust the height of the image in there by max-height, it still overflows the image out from the screen, so no luck on that side either.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
You can try this
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;
}
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .