Advertisement:

Author Topic: Need help with css  (Read 3827 times)

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Need help with css
« on: October 29, 2018, 03:11:52 PM »
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?

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #1 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:

Code: [Select]
#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.

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #2 on: October 29, 2018, 07:47:10 PM »
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?

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #3 on: October 29, 2018, 08:28:33 PM »
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Try background-size: contain;
That should sort it.

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #4 on: October 29, 2018, 08:38:52 PM »
I used it like this:
Code: [Select]
#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.  :-\

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 8,326
  • Riding the long highway in the sky.
Re: Need help with css
« Reply #5 on: October 29, 2018, 09:19:43 PM »
Try width: 100%; (or whatever % you need).

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #6 on: October 29, 2018, 10:25:31 PM »
I used it like this:
Code: [Select]
#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.

Code: [Select]
#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;
}

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #7 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):




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:

Code: [Select]
#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.

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #8 on: October 30, 2018, 11:49:45 AM »
Try width: 100%; (or whatever % you need).


I've tried with
Code: [Select]
#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.  :(

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #9 on: October 30, 2018, 03:00:26 PM »
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.

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #10 on: October 30, 2018, 03:03:44 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #11 on: October 30, 2018, 03:38:30 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #12 on: October 30, 2018, 04:07:54 PM »
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:

Code: [Select]
#header {
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 repeat-x;
}

Change it to this:

Code: [Select]
#header {
height: 250px;
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat;
}

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 57,221
  • Gender: Male
    • Kindred-999 on GitHub
Re: Need help with css
« Reply #13 on: October 30, 2018, 04:29:27 PM »
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...
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,207
  • Master of BBC Abuse
Re: Need help with css
« Reply #14 on: October 30, 2018, 05:35:02 PM »
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:

Code: [Select]
#header {
height: 250px;
max-height: 250px;
overflow: hidden;
background: #f3f3f3 url(https://imagizer.imageshack.us/a/img924/5601/ymzhRF.jpg) 50% 0 no-repeat;
}

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #15 on: October 30, 2018, 07:53:55 PM »
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...

Offline FragaCampos

  • Sophist Member
  • *****
  • Posts: 1,293
  • Gender: Male
    • docsPT
Re: Need help with css
« Reply #16 on: November 08, 2018, 06:39:55 PM »
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.