Προς το περιεχόμενο

100% background image - css ή script ?

antonisid

Από τον antonisid
στο Web Design - Development

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

antonisid Crazy Insomniac

antonisid

Δημοσ.
Δημοσ.

Γεια σας

Λοιπον θέλω να βάλω σε μια ιστοσελίδα που φτιάχνω κάποιες φωτογραφίες για background οι οποίες με κάθε ανανέωση ή περιήγηση θα επιλέγονται τυχαία απο έναν φάκελλο με φώτος. Το θέμα είναι οτι θέλω να πιάνουν όλο το μήκος και ύψος της σελίδας εφόσον είναι και μεγάλες σε μέγεθος. Βρήκα πως το κάνω ως εξής :

css:

.image {

width: 100%;

height:100%;

position: absolute;

top: 0;

left: 0;

}

και στο body:

<body>

<img src="test.jpg" class="image" />

</body>

 

Εχω ομως 2 αποριες :

α) δε ξερω αν αυτος ο τροπος ειναι μπακαλίστικος

β)Η φωτογραφία γίνεται resize?

 

Θα προτιμουσατε μήπως κάποιο script πχ με Jquery για να το κάνετε αυτό ? Κι αν ναι ποιό?

 

Ευχαριστώ

antonisid Crazy Insomniac

antonisid

Δημοσ.
  • Μέλος
Δημοσ.
η φωτογραφία γίνεται resize στο μέγεθος της οθόνης του χρήστη. Γιατί δεν την βάζεις απλά ως background στο body?

 

Ευχαριστω για την απαντηση. Το προτιμω ως background στο body αλλά

 

τι παραμετρους πρεπει να του δωσω στο css διοτι μου την εμφανιζει την φωτο full size. Δε μπορώ να βάλω position:absolute , top,left:0 κτλ όμως στην class που χρησιμοποιησα. Πως θα γινει να ειναι ακριβως το μεγεθος της οθονης ?

 

Επισης οπως σου πα θελω να διαλεγονται με καθε ανανεωση τυχαια φώτος απο εναν φακελλο. Στο css μπορω μόνο μια φώτο να δηλώσω ως φόντο.

 

Καμμιά ιδέα? :-)

antonisid Crazy Insomniac

antonisid

Δημοσ.
  • Μέλος
Δημοσ.
Δες αυτό που έχω κάνει στη δική μου σελίδα :

http://roussounelosweb.gr

 

Κάθε 60 δευτερόλεπτα ή όταν λήξει το session διαλέγει τυχαίο background από ένα φάκελο. Αν θέλεις κάτι τέτοιο, πές μου να σου στείλω τον κώδικα.

 

Ναι αν εχεις την διαθεση στειλε το μου. τα backgrounds οριζονται στο css ή με image tag στον html κώδικα? Σ ευχαριστώ!!!!!!!

@sterios Proficient

@sterios

Δημοσ.
Δημοσ.

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

http://ringvemedia.com/introduction

http://www.surfinparadise.com.au/location.asp

http://www.twelve-restaurant.co.uk/

http://carfreaks.net/.

 

Το πλήρες άρθρο είναι εδώ αν σε ενδιαφέρει.

routsounmanman Proficient

routsounmanman

Δημοσ.
Δημοσ.
Ναι αν εχεις την διαθεση στειλε το μου. τα backgrounds οριζονται στο css ή με image tag στον html κώδικα? Σ ευχαριστώ!!!!!!!

 

Το background ορίζεται μέσω css δυναμικά από τον php κώδικα:

 

>function getBackground(){
		
		//check SESSION for 60 seconds timeout
		if(time() - $_SESSION['timeout'] > 60)
			$_SESSION['background'] = false;
		
		if($_SESSION['background'])
			return $_SESSION['background'];
		
		$images = scandir('images/backgrounds/');
		$images_array = array();
		
		foreach($images as $element){
		
			if($element != '.' && $element != '..' && $element != 'thumbs.db')
				array_push($images_array, $element);
			
		}
		
		$pick = $images_array[array_rand($images_array)];
		
		$_SESSION['background'] = "<body style=\"background:url('images/backgrounds/".$pick."') left #000 no-repeat; background-attachment: fixed;\">";	
		$_SESSION['timeout'] = time();
		return $_SESSION['background'];
		
	}

 

Το μόνο κακό είναι ότι δεν κάνει scale τη φωτό αλλά center. Όταν βρώ λύση καθώς με ενδιαφέρει και εμένα, θα στο στείλω :-)

antonisid Crazy Insomniac

antonisid

Δημοσ.
  • Μέλος
Δημοσ.

ωχ...οταν λες Scale εννοεις resize? Μ εκαψες :P αλλα θα μελετησω τον κωδικα και θα ψαξω να βρω λυση. Αυτο ισως μπορει να γινει με καποια παρέμβαση στο css . Σ ευχαριστω παντως!!!!

 

@stergios tnx για τον σύνδεσμο , πολύ χρήσιμο.

routsounmanman Proficient

routsounmanman

Δημοσ.
Δημοσ.
ωχ...οταν λες Scale εννοεις resize? Μ εκαψες :P αλλα θα μελετησω τον κωδικα και θα ψαξω να βρω λυση. Αυτο ισως μπορει να γινει με καποια παρέμβαση στο css . Σ ευχαριστω παντως!!!!

 

@stergios tnx για τον σύνδεσμο , πολύ χρήσιμο.

 

Αν έχεις ήδη έτοιμο τον κώδικα για scale πχ img μέσα σε div (δεν μου αρέσει και πολύ σαν τρόπος, πολύ μπακαλίστικος), μπορείς να κρατήσεις το κομμάτι του κώδικα που επιστρέφει την τυχαία εικόνα και να την εισάγεις στο source του img :rolleyes:

antonisid Crazy Insomniac

antonisid

Δημοσ.
  • Μέλος
Δημοσ.
Αν έχεις ήδη έτοιμο τον κώδικα για scale πχ img μέσα σε div (δεν μου αρέσει και πολύ σαν τρόπος, πολύ μπακαλίστικος), μπορείς να κρατήσεις το κομμάτι του κώδικα που επιστρέφει την τυχαία εικόνα και να την εισάγεις στο source του img :rolleyes:

 

Ναι γι αυτο ρωτησα στο πρωτο μου post αν ειναι μπακαλιστικος ο τροπος που χρησιμοποιω. Θα προσπαθησω να τις περασω ως background στο body βασει του συνδεσμου που παρέθεσε ο @stergios http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ και συγκεκριμένα ως εξής.

body {

padding: 0;

margin: 0;

background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

 

width: 100%;

display: table;

}

routsounmanman Proficient

routsounmanman

Δημοσ.
Δημοσ.
Ναι γι αυτο ρωτησα στο πρωτο μου post αν ειναι μπακαλιστικος ο τροπος που χρησιμοποιω. Θα προσπαθησω να τις περασω ως background στο body βασει του συνδεσμου που παρέθεσε ο @stergios http://www.webdesignerwall.com/tutorials/how-to-css-large-background/ και συγκεκριμένα ως εξής.

 

Δεν νομίζω να δουλέψει έτσι. Αυτό το width:100% αναφέρεται στο body, όχι το image. Μπορείς να κάνεις αυτό:

 

>
<body>
[...]
<img src='$random_image' alt='random background'></img> // Η εικόνα που επιστρέφει ο κώδικάς μου
[...]
</body>

body img{ //τα img που περιέχονται στο body

padding: 0;
margin: 0;
z-index: 1;
width: 100%;

}

spartakoscs Proficient

spartakoscs

Δημοσ.
Δημοσ.

γιατί απλά μπορεί να δώσει κάποια κίνηση εάν τον ενδιαφέρει ... και είπα ότι μπορεί να το κάνει και με flash όχι ότι πρέπει να το κάνει με flash .

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...