Hi there.
My template uses an image on the top, which I tweaked a bit to change with mouseover.
The problem is sometimes the browser scrambles it and I don't know why.
Here's a screenshot:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimagizer.imageshack.us%2Fa%2Fimg922%2F2912%2FasaMeB.jpg&hash=3a5614ff9e3258037ee0a8a71ea3a3431c9fd82d)
Anyone knows why this happens?
Yep. This is your header image: https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg
Is it doubled vertically so, depending on what proportions you set for your header, you will see the vertical doubling sometimes.
The horizontal crud is because the CSS has this:
#header {
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 repeat-x;
}
The repeat-x makes the image tile horizontally. Change it to no-repeat to stop that.
Thank you very much, Antechinus!
One more thing about this image: depending on the screen resolution, the image is redimensioned horizontally. How can I make it to always fit correctly (show the image entirely) on that space on the top?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Try background-size: contain;
That should sort it.
I used it like this:
#header { background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat; background-size: contain;}
I don't know if this is correct, but it didn't work. :-\
Try width: 100%; (or whatever % you need).
Quote from: FragaCampos on October 29, 2018, 08:38:52 PM
I used it like this:
#header { background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat; background-size: contain;}
I don't know if this is correct, but it didn't work. :-\
Could be because the shorthand background declaration includes all background stuff by default. Try splitting it up and going longhand.
#header {
background-color: #f3f3f3;
background-image: url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: contain;
}
Before addressing your last reply, let me inform you that the
no-repeat didn't work entirely.
It did change something, but here's a screenshot taken a while ago (you can see how it is different from the first image):
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimagizer.imageshack.us%2Fa%2Fimg923%2F7026%2FiSQLAv.jpg&hash=17ee1e0c8b23071d859a42cef034e1885fc0906f)
Quote from: Antechinus on October 29, 2018, 04:23:31 PM
Yep. This is your header image: https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg
Is it doubled vertically so, depending on what proportions you set for your header, you will see the vertical doubling sometimes.
The horizontal crud is because the CSS has this:
#header {
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 repeat-x;
}
The repeat-x makes the image tile horizontally. Change it to no-repeat to stop that.
Quote from: Sir Osis of Liver on October 29, 2018, 09:19:43 PM
Try width: 100%; (or whatever % you need).
I've tried with
#header { background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat; width: 100%;}but nothing changed. It still crops horizontally depending on screen resolution. :(
Quote from: FragaCampos on October 30, 2018, 11:39:52 AM
Before addressing your last reply, let me inform you that the no-repeat didn't work entirely.
It did change something, but here's a screenshot taken a while ago (you can see how it is different from the first image):
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimagizer.imageshack.us%2Fa%2Fimg923%2F7026%2FiSQLAv.jpg&hash=17ee1e0c8b23071d859a42cef034e1885fc0906f)
It's working exactly as it should. As I linked before, this is your actual header image:
(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg)
That's what it looks like if you view the whole thing.
If you don't want it to look like that, you need to make another image.
No, this is what it looks like *most* of the times:
Without mouseover:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimagizer.imageshack.us%2Fa%2Fimg924%2F7285%2Fvd3pUM.jpg&hash=73163e3ede84023e5311beab26246fff462e382d)
With mouseover:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimagizer.imageshack.us%2Fa%2Fimg924%2F222%2FjKORKA.jpg&hash=a0b2ead1a5b580154d447838a463ca5e719e2c1c)
The problem is sometimes it gets scrambled and I have no idea why.
I grabbed that image directly from my browser while viewing your site. It's pointless saying "No".
That is your header image in my post above. The real thing. All of it. No tricksy magical stuff.
It is not getting scrambled. What is happening is that sometimes, probably depending on screen resolution, the container for it gets large enough so that you can see more of the image.
Ok, having thought about it, and having seen the difference between mouseover and mouseout, what you really want is to set the header so that you can only ever see half of the image.
That is easy. This is the original CSS:
#header {
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 repeat-x;
}
Change it to this:
#header {
height: 250px;
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat;
}
IN other words... you are using a sprite type image that shows different portions, depending on the hover... As Antechnius says - you have not limited the vertical space to only display half of the image... so, at times, if the space is available, it will show the whole image instead of just the half that you want shown.
You have to force a max-height on the header/banner space and you have to make sure that your CSS is cleanly determining the right spot to start/end the display...
I checked all the header css using dev tools. It has the hover positioning sorted already (has background-position declared for #header:hover). As far as I can tell at the moment, it just needs the height and the repeat-x sorted. Should be good to go with what I posted above.
It would only need a max-height if there was content that would tend to force the height over 250px, in which case it would probably also need hidden overflow. The total belt and braces approach would be:
#header {
height: 250px;
max-height: 250px;
overflow: hidden;
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat;
}
Thank you guys, I'll try to test this and see how it goes.
This scrambling happens like in 10% of the times, no matter the browser. And it can also happen in different opened tabs, which is even stranger...
Well, after a week of testing, the top image didn't scramble not even once. At least for me.
I did two changes:
- add the no-repeat
- changed the image link, which somehow wasn't the original one I've sent to imageshack. What probably happened is that when I uploaded the image via ShareX, the link wasn't from the original image, but a resized one.
I'll pay more attention in the next change of the top image.
Thank you all for your help.