Need help with css

Started by FragaCampos, October 29, 2018, 03:11:52 PM

Previous topic - Next topic

FragaCampos

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:




Anyone knows why this happens?

Antechinus

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.

FragaCampos

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?

Antechinus


FragaCampos

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.  :-\

Sir Osis of Liver

Try width: 100%; (or whatever % you need).
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

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;
}

FragaCampos

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):




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.

FragaCampos

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.  :(

Antechinus

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):

It's working exactly as it should. As I linked before, this is your actual header image:



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.

FragaCampos

No, this is what it looks like *most* of the times:

Without mouseover:


With mouseover:



The problem is sometimes it gets scrambled and I have no idea why.

Antechinus

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.

Antechinus

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;
}

Kindred

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...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

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;
}

FragaCampos

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...

FragaCampos

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.

Advertisement: