End of Support for Joomla 3 - Forum closed

JP Design Backgroundimage nicht sichtbar Safari

  • Kathi
  • Kathi's Avatar Offline Topic Author
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 16
  • Thank you received: 2

JP Design Backgroundimage nicht sichtbar Safari was created by Kathi

Posted 4 years 7 months ago #26399
Ich schon wieder... sorry
Ich teste gerade mit verschiedenen Browsern die Webseite.
Bei den "Andoid & Windows" Browsern ist ja alles gut soweit.
Das Iphone und Ipad machen Probleme mit dem Safari Browser.
Es sind keine Hintergrundbilder sichtbar.
Weder im Headerbereich noch bei Top bzw Bottom Sectionen
Bei dem Safari, den ich auf Windows installiert habe, habe ich auch bei der Template Demo JP Design nichts im Hintergrund
Gehe ich mit dem Ipad oder Iphone auf das Demo Template, sieht man etwas, auf meiner Webseite beauty-elements.de sehe ich nichts vom Hintergrund.
Wir hatten ja den Hintergund in der custom.css erweitert mit
Code:
/* Hintergund beim Logo Transparenz*/ /* Header -------------------------------------------------*/ .header { background:rgba(255, 255, 255, 0); } /*Overlay transparent grün*/ .sprocket-mosaic-g-effect {position: absolute;bottom: 0;left: 0;right: 0;top: 0;width: 0;height: 0;opacity: 0;background: #b9ddce9e;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;-webkit-backface-visibility: hidden;-webkit-transform: translatez(0);} /*Hintergrund wechsel bei mobiler Ansicht*/ @media only screen and (max-width: 480px) { .header::before { background: rgba(0, 0, 0, 0) url("/images/beautybg/facenaturebemobil2.jpg") no-repeat fixed 50% 0 / cover !important; } }

Kann man den Safari da mit einbinden, das auch dort der Hintergrund angezeigt wird?
Vielen Dank für Ihre Bemühungen!
by Kathi

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic JP Design Backgroundimage nicht sichtbar Safari

Posted 4 years 7 months ago #26406
Hallo, testen sie mal folgendes

/*Hintergrund wechsel bei mobiler Ansicht*/
@media only screen and (max-width: 480px) {
.header::before {
background: rgba(0, 0, 0, 0) url("/images/beautybg/facenaturebemobil2.jpg") no-repeat scroll 50% 0 / cover !important; }
}

Please Log in or Create an account to join the conversation.

  • Kathi
  • Kathi's Avatar Offline Topic Author
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 16
  • Thank you received: 2

Replied by Kathi on topic JP Design Backgroundimage nicht sichtbar Safari

Posted 4 years 7 months ago #26413
Geändert hat sich nichts. Das Bild schein ja da zu sein.
Vielleicht klappt es auch mit der Transparenz beim Logohintergrund nicht.
Die Transparenz bzw. der weiße Hintergrund hinter dem Logo kann eigentlich auch weg weil ich ja 100% Transparenz möchte und nicht mehr die Transparenz vom header benötige.
by Kathi

Please Log in or Create an account to join the conversation.

  • Kathi
  • Kathi's Avatar Offline Topic Author
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 16
  • Thank you received: 2

Replied by Kathi on topic JP Design Backgroundimage nicht sichtbar Safari

Posted 4 years 7 months ago #26427
Ich komme nicht weiter..
ich habe jetzt eine neue Joomla Installation gemacht. Wenn ich die auf dieser mit 480px aufrufe ist das Bild da. Mit 768px nicht.
Da habe ich diese Parameter in der custom.css
Code:
/*Hintergrund wechsel bei mobiler Ansicht*/ @media only screen and (max-width: 480px) { .header::before { background: rgba(0, 0, 0, 0) url("https://beauty-elements.de/images/beautybg/facenaturebemobil2.jpg") no-repeat scroll 50% 0 / cover !important;} } /*Hintergrund wechsel bei mobiler Ansicht*/ @media only screen and (max-width: 768px) { .header::before { background: rgba(0, 0, 0, 0) url("https://beauty-elements.de/images/beautybg/facenaturebemobil2.jpg") no-repeat scroll 50% 0 / cover !important;} } /* Hintergund beim Logo Transparenz*/ /* Header -------------------------------------------------*/ .header { background:rgba(255, 255, 255, 0);
Auf der eigentlich Webseite habe ich nur den Pfad zu dem Bild geändert. Beim Laden der Seite ist das Bild kurz da und sobald fertig geladen.. hinter dem Logo der Hintergrund weiss.
Code:
/*Hintergrund wechsel bei mobiler Ansicht*/ @media only screen and (max-width: 480px) { .header::before { background: rgba(0, 0, 0, 0) url("/images/beautybg/facenaturebemobil2.jpg") no-repeat scroll 50% 0 / cover !important; } } /*Hintergrund wechsel bei mobiler Ansicht*/ @media only screen and (max-width: 768px) { .header::before { background: rgba(0, 0, 0, 0) url("/images/beautybg/facenaturebemobil2.jpg") no-repeat scroll 50% 0 / cover !important; } } /* Hintergund beim Logo Transparenz*/ /* Header -------------------------------------------------*/ .header { background:rgba(255, 255, 255, 0);!important }
So sehr ich google auch beansprucht habe und selbst probiert habe.. ich finde den Fehler nicht.
Könnten sie bitte noch mal schauen. -Danke
by Kathi

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic JP Design Backgroundimage nicht sichtbar Safari

Posted 4 years 7 months ago #26434
Hallo,
da hilft nur probieren. Anders würde ich es auch nicht machen.
css-tricks.com/forums/topic/background-s...nt-safari-play-nice/

Das kostet halt Zeit aber man lernt auch was.
Eventuell hilft der Parameter:

background-attachment: scroll;
background-color:none;

Last Edit:4 years 7 months ago by joomlaplates
Last edit: 4 years 7 months ago by joomlaplates.

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Installations-Service

Don´t waste your time, we install your purchased Template
with the "Demo Content" within the next 24 hours.

Buy Now - 59€

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2024 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License