Εικόνα στο 100% του πλάτους

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Εικόνα στο 100% του πλάτους

Δημοσίευση από EneMe » 17 Οκτ 2010 23:10

Κώδικας: Επιλογή όλων

<html>
<head>
<body style="background-image&#58;portrait.jpg;position&#58;absolute;z-index&#58;1;left&#58;0px;top&#58;0px;width&#58;100%;">a</body>
</html>
Είμαι σίγουρος ότι είναι λάθος, γιατί δεν δουλεύει, αλλά θέλω το εξής:

Η εικόνα να μπαίνει σαν background image και να πιάνει σε φάρδος το 100% του browser.
Για να φανεί και η υπόλοιπη να κάνω scroll down...

Καμιά ιδέα;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Εικόνα στο 100% του πλάτους

Δημοσίευση από dimsis » 17 Οκτ 2010 23:51

Βλέπω θέλεις μόνο το πλάτος 100%, οπότε δες πρώτα αυτό, αλλά βγάλε το fixed
http://www.htmlite.com/faq022.php

Για πλάτος / ύψος 100%:
http://css-tricks.com/perfect-full-page ... und-image/
http://css-tricks.com/how-to-resizeable ... und-image/
http://bavotasan.com/downloads/full-siz ... ry-plugin/


Άβαταρ μέλους
dervisis
Δημοσιεύσεις: 44
Εγγραφή: 25 Αύγ 2006 22:15
Τοποθεσία: *.*
Επικοινωνία:

Εικόνα στο 100% του πλάτους

Δημοσίευση από dervisis » 19 Οκτ 2010 02:07

Αντιμετώπισα πρόσφατα το ίδιο θέμα και το έλυσα ως εξής:
Φτιάξε ένα div πριν το page-wrap.

Κώδικας: Επιλογή όλων

<div id="bg-wrap"><img src="path/eikona.jpg" /></div>
και γράψε στο css:

Κώδικας: Επιλογή όλων

#bg-wrap&#123;
	position&#58;fixed;
	top&#58;0px;
	margin&#58;0 auto;
	height&#58;100%;
	width&#58;100%;
	z-index&#58;-2;
&#125;
#bg-wrap img&#123;
	height&#58;100%;
	width&#58;100%;
&#125;
Edit: Τώρα είδα ότι εξηγούν πολύ σωστά και τα links του Eneme :)~
Overdose Πληροφορίας!!![/list]

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Εικόνα στο 100% του πλάτους

Δημοσίευση από EneMe » 29 Οκτ 2010 01:47

Τα δοκίμασα όλα, αλλά επειδή υπάρχουν πολλοί επισκέπτες με ΙΕ 5, 5.5 και 6 και δεν έβγαινε σωστό το αποτέλεσμα, άλλαξα τρόπο αισθητικής προσέγγισης.

Ευχαριστώ.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες