Background Image size optimization.

Tablet · 11 Σεπτεμβρίου 2012

Κατευθείαν στο ψητό...

Ειναι δυνατόν η εικονα στο background να γεμιζει σε όλες τις οθονες με οποια αναλυση που ειναι δυνατο να ανοιξει το site..Για background εχω

>
<div name="image-background-iframe" style="position: fixed; left: 0px; top: -10px; width: 100%; height: 100%; background-color: black; z-index: -10;"><center>
<iframe src="http://www.hqdesktopwallpapers.us/uploads/Splash_Forest_1920_1080.jpg" height="1920px" width="1080px" scrolling="no"></iframe></center></div>

Με το παραπανω σε αναλυση 1920χ1080 μου το σπρώχνει αριστερα..Tι κανω λαθος ρε παιδια;

TheELF · 11 Σεπτεμβρίου 2012

Με τον παρακάτω κώδικα μπορείς να ορίσεις απευθείας το background της σελίδας οπότε δεν χρειάζεται αν ψάχνεσαι με iframe και ιδίως z-index που είναι μπλέξιμο.

Δεν πιάνει παντού,αλλά σχεδόν παντού.

>
<head>
<style type="text/css">
html {
    background: url(http://img25.imageshack.us/img25/8585/06bkristinkreuk08.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>
</head>

Tablet · 11 Σεπτεμβρίου 2012

Δε δουλεύει δεν μου εμφανιζει καν το background

TheELF · 11 Σεπτεμβρίου 2012

Το βάζεις στο σωστό σημείο;;;;

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//utf-8">
<html>
<head>
<style type="text/css">
html {
 background: url(http://img25.imageshack.us/img25/8585/06bkristinkreuk08.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
</style>
</head>
<body>

</body>
</html>

με ποιο browser είσαι;;;

Tablet · 11 Σεπτεμβρίου 2012

Είμαι με safari.Το βάζω μετα το κείμενο..

Sent from my iPad using Insomnia

TheELF · 11 Σεπτεμβρίου 2012

;;μετά από ποιο κείμενο;;;

Πρέπει αν μπεί μέσα στο <head> </head>

Tablet · 11 Σεπτεμβρίου 2012

Σου στελνω ολη την σελίδα να δεις..

>

<font color="#FFFFFF"><font face="garamond">
KEIMENO
</font>


<div name="image-background-iframe" style="position: fixed; left: 0px; top: -10px; width: 100%; height: 100%; background-color: black; z-index: -10;"><center>
<iframe src="http://i1125.photobucket.com/albums/l592/favorboxbakery/Holidays/pumpkinfairies.jpg" height="1080px" width="1920px" scrolling="no"></iframe></center></div>

Εγω τωρα το εχω στο τέλος..

defacer · 11 Σεπτεμβρίου 2012

Δεν μας λες καθόλου τι περιμένεις να γίνει αν το μέγεθος του παραθύρου δεν έχει τον ίδιο λόγο διαστάσεων με την εικόνα σου.

Tablet · 12 Σεπτεμβρίου 2012

Δεν μας λες καθόλου τι περιμένεις να γίνει αν το μέγεθος του παραθύρου δεν έχει τον ίδιο λόγο διαστάσεων με την εικόνα σου.

Eπειδη αυτο που λες εκ των πραγματων θα συμβεί..Τι γινεται σε αυτη την περίπτωση;;

Τι διαστασεις πρεπει να εχει η εικονα μου ετσι ωστε χωράει απο τα 800 μεχρι τα 1080p monitor?

defacer · 12 Σεπτεμβρίου 2012

Το θέμα είναι εσύ τι θέλεις να γίνεται. Οι επιλογές που υπάρχουν είναι:

Επανάληψη του wallpaper για να καλύψει τον κενό χώρο σε μία διάσταση
Δημιουργία κενού (χωρίς wallpaper) χώρου σε μία διάσταση, σε μία πλευρά μόνο
Δημιουργία κενού (χωρίς wallpaper) χώρου σε μία διάσταση, και στις 2 πλευρές (κεντράρισμα του wallpaper)
Αλλαγή του λόγου διαστάσεων του wallpaper (παραμόρφωση)

Η ακριβής λύση στο πρόβλημα εξαρτάται από

ποιά (ή ποιές) από τις παραπάνω επιλογές είναι αποδεκτές για σένα
ποιούς browser θέλεις να υποστηρίζεις (βασικά το καίριο ερώτημα είναι αν θα υποστηρίζεις Internet Explorer 8 και παλιότερο)
αν θέλεις καθαρά HTML/CSS λύση ή αν είσαι OK και με Javascript

Υπάρχει περίπτωση αν τα θέλεις όλα δικά σου (π.χ. #3, υποστήριξη παλιού internet explorer, χωρίς Javascript) να μην υπάρχει καθόλου λύση.

Το 1080p έχει διαστάσεις 1920x1080 (δεν ήταν τόσο δύσκολο να το κάνεις google) αλλά καλύτερα θα ήταν να υποστηρίζεις μέχρι 1920x1200 που είναι λόγος 16:10 αν μπορείς, πολλά monitor 24" και πάνω είναι έτσι.

Tablet · 12 Σεπτεμβρίου 2012

*Έχεις δίκιο καλύτερα να φτάνει μέχρι 1200p..

Βασικά νομίζω ότι ότι stretch της εικόνας είναι η καλύτερη επιλογή για μένα μιας και από την φύση της η εικόνα και αν αλλάξει το μέγεθος της δεν θα παραμορφώσει.

Θέλω html , δεν με ενδιαφέρει να παίζει σε IE explorer 8 και πίσω..

οπότε;

defacer · 12 Σεπτεμβρίου 2012

Easy peasy. Βάζεις ένα div κατευθείαν μέσα στο body και του δίνεις absolute position και top/left/right/bottom 0 για να πιάνει όλο το παράθυρο. Μετά με background-size 100% 100% κανονίζεις το stretch της εικόνας και τέλος βάζεις κάποιο αρνητικό z-index (μικρότερο από το μηδέν και από οποιοδήποτε άλλο z-index χρησιμοποιείς) ούτως ώστε αυτό το div να κάτσει "πίσω" από οποιοδήποτε άλλο content έχεις.

Demo.

Προσοχή γιατί αν η εικόνα είναι μεγάλη σε μέγεθος θα αργήσει να φορτώσει την πρώτη φορά, οπότε ίσως θα ήταν καλό να έβαζες και κάποιο background color για το ενδιάμεσο.

Σύνδεση

Background Image size optimization.

Προτεινόμενες αναρτήσεις

Tablet

TheELF

Tablet

TheELF

Tablet

TheELF

Tablet

defacer

Tablet

defacer

Tablet

defacer

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση