1. Boris Darin
  2. Hope
  3. Monday, 15 June 2020
Hello!

1. Tell me, please, how to make a background image in the header for the entire width of the screen? And on the mobile version - the center.

Now it is duplicated on the desktop version and the left part is shown on the mobile version ...

https://yadi.sk/i/TgBa4spub-SZ3g
https://yadi.sk/i/n3qDsXGzZqGi7w

2. How to make background shading for a given image?
Accepted Answer
Accepted Answer Pending Moderation
Hi,
Please use the below code to your custom.css file:

.sp-page-title {
background-position: center;
background-size: 100% 100%;
box-shadow: 0 4px 8px 0 #ff2b02;
}


Note: How to create Custom.css file:
https://prnt.sc/rc7obg
https://prnt.sc/rc7pnm
https://prnt.sc/rc7p4p

Best Regards
  1. more than a month ago
  2. Hope
  3. # Permalink
Responses (18)
Accepted Answer Pending Moderation
Hi,
It is looking stretched because it is trying to fit within a smaller window!
So you can use the following media query:

@media only screen and (max-width: 767px)
{
.sp-page-title {
background-size: 160% 100%;
}
}

This will let you spread the image sideways, so the image will no longer seem to be stretched!
You can change the first percentage value to see which width is good for your eye!

Best Regards
  1. more than a month ago
  2. Hope
  3. # 1
Accepted Answer Pending Moderation
Hi,
Looking fine at my phone:
[attachment]CF4E2F07-9F8E-40CF-AD86-AB0F939C6A70.png[/attachment]

Best Regards


Strange, I'll look at other phones. In this case, how can you not distort the proportions of the picture?
  1. more than a month ago
  2. Hope
  3. # 2
Accepted Answer Pending Moderation
Hi,
Looking fine at my phone:
CF4E2F07-9F8E-40CF-AD86-AB0F939C6A70.png

Best Regards
Attachments (1)
  1. more than a month ago
  2. Hope
  3. # 3
Accepted Answer Pending Moderation
Hi,
Did that solve at your end?

Regards


Hello! No, the mobile version has the left part of the image again... You need a centered image.
Attachments (1)
  1. more than a month ago
  2. Hope
  3. # 4
Accepted Answer Pending Moderation
Hi,
Did that solve at your end?

Regards
  1. more than a month ago
  2. Hope
  3. # 5
Accepted Answer Pending Moderation
Hi,
Here it is looking fine at my end!
Have you cleared your Joomla and Browser cache, please?

Best Regards
  1. more than a month ago
  2. Hope
  3. # 6
Accepted Answer Pending Moderation
Transparency is probably not quite right, here it is as if you need to impose a new layer on top and give it transparency. But maybe it will work)

BUT! For some reason, I have a problem with custom.css ... The file returns to its original state (with shadow) ...

For the sake of experiment, I completely deleted the code from custom.css - the shadow still remains ...

Only removing custom.css helps.

I tried to create anew - the problem is not solved.

http://geghardtest.tmweb.ru/blog/gekhardu-4-goda
Attachments (2)
  1. more than a month ago
  2. Hope
  3. # 7
Accepted Answer Pending Moderation
Hi,
Great!
Did you mean the transparency of the image, please?
Then you can use this extra line within your code:

opacity: 0.8;

You can change the value as you want!

Best Regards
  1. more than a month ago
  2. Hope
  3. # 8
Accepted Answer Pending Moderation
Hi,
I can see it is not changed within your custom.css file!
Here is a screenshot of that: https://prnt.sc/t34nq9
Would you please recheck the file?

Best Regards


Hello! Strange, checked, everything is fine. Another small addition: I do not need a box-shadow, but a dimming title image. Translation difficulties)
Attachments (2)
  1. more than a month ago
  2. Hope
  3. # 9
Accepted Answer Pending Moderation
Hi,
I can see it is not changed within your custom.css file!
Here is a screenshot of that: https://prnt.sc/t34nq9
Would you please recheck the file?

Best Regards
  1. more than a month ago
  2. Hope
  3. # 10
Accepted Answer Pending Moderation
Hello! Corrected. It doesn’t work ... I cleaned the cache.
http://geghardtest.tmweb.ru/blog
Attachments (1)
  1. more than a month ago
  2. Hope
  3. # 11
Accepted Answer Pending Moderation
Yes!
  1. more than a month ago
  2. Hope
  3. # 12
Accepted Answer Pending Moderation
Hi,
Please use the below code to your custom.css file:

.sp-page-title {
background-position: center;
background-size: 100% 100%;
box-shadow: 0 4px 8px 0 #ff2b02;
}


Note: How to create Custom.css file:
https://prnt.sc/rc7obg
https://prnt.sc/rc7pnm
https://prnt.sc/rc7p4p

Best Regards


Thank! Is the correct code here?
  1. more than a month ago
  2. Hope
  3. # 13
Accepted Answer Pending Moderation
Hello,
Actually the .sp-page-title class was mistakenly written twice in my previous code! Sorry about that...
I have updated the code, so would you please use this instead of that?
I think it will serve you better, but if you still need the image to show differently from desktop view then let me know that.

Best regards
  1. more than a month ago
  2. Hope
  3. # 14
Accepted Answer Pending Moderation
OK, thanks!

Can you also tell me how to make the image display on mobile devices so that it displays not the leftmost part, but, for example, the center?
  1. more than a month ago
  2. Hope
  3. # 15
Accepted Answer Pending Moderation
I need to do this in all sections of the site, for example:
http://geghardtest.tmweb.ru/kontakty

Can you give a little instruction on how to change css, please?
  1. more than a month ago
  2. Hope
  3. # 16
Accepted Answer Pending Moderation
Hi,
It would be better to have your site URL! without URL it's not possible to get the class/ID of that part, so I am giving you hints only!
You may try the following CSS properties:

background-position: center!important;
background-size: 100% 100%!important;

And about dropping shadow the following can be helpful:
box-shadow: 0 4px 8px 0 #ff2b02;

Best Regards
  1. more than a month ago
  2. Hope
  3. # 17


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.