Πως θα πετύχω αυτό το background;

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

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

Απάντηση
Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Πως θα πετύχω αυτό το background;

Δημοσίευση από Mandingueiro » 14 Μαρ 2009 13:26

I want to achieve this background in my homepage, but I don't know which way to follow. I mean, I could just put this image as the background image but this wouldn't be the right way to do it since it's too big and made for the 1280x1024 resolution. Or I could seperate the image to 3 divs or something else.

Any ideas please? Thanks in advance! :mrgreen:

Γειά σε όλους :D

Έφτιαξα ένα background με Fireworks σε διαστάσεις 1280x1024: http://www.core-studios.net/bg.png

Θέλω να πετύχω αυτό το background στην σελίδα μου, αλλά δεν ξέρω ποιόν τρόπο ν'ακολουθήσω. Εννοώ, θα μπορούσα απλά αυτή την εικόνα που έβαλα παραπάνω να τη χρησιμοποιήσω ολόκληρη ως εικόνα φόντου (background: url(bg.png)) αλλά προφανώς δεν είναι αυτός ο καλύτερος τρόπος καθώς είναι πολύ μεγάλη και θα ταίριαζε μόνο σε ανάλυση 1280x1024. Ίσως να γίνεται με 3 ή περισσότερα divs αλλά δεν είμαι σίγουρος, καθώς όπως βλέπετε η εικόνα είναι μια έκλειψη στην ουσία, με άσπρο χρώμα αρχικά και μετά πάει σε γκρί. Δεν είναι ένα απλό κάθετο gradient , τότε θα ήταν πιο εύκολο.

Ευχαριστώ προκαταβολικά!

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πως θα πετύχω αυτό το background;

Δημοσίευση από dva_dev » 14 Μαρ 2009 21:33

Δοκίμασε κάτι τέτοιο:

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

body {
    background-color: #d6d6d6;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center top;
}

Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Πως θα πετύχω αυτό το background;

Δημοσίευση από Mandingueiro » 14 Μαρ 2009 22:13

Σ'ευχαριστώ πολύ, αυτή την τεχνική θ'ακολουθήσω απλά χωρίς το alignment που έχεις βάλει. :D

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Πως θα πετύχω αυτό το background;

Δημοσίευση από Sermac » 15 Μαρ 2009 14:51

Εγώ θα το έκανα έτσι για να μην ξεχωρίζει σε αναλύσεις μεγαλύτερες της εικόνας.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
<head>
    <title>Cyclic Background</title>
    <style type="text/css">
        body&#123;background&#58;#E4E4E4 url&#40;bg.png&#41; no-repeat fixed center center;&#125; 
    </style>
</head>
<body>
    <div>
        <!-- content -->
    </div>
</body>
</html>
Αν προσέξεις όλοι οι κύκλοι βρίσκονται μέσα στο περιθώριο της εικόνας. Την εικόνα φυσικά θα την συμπίεζα γιατί 65kb είναι υπερβολικά πολλά. Έτσι κι αλλιώς το ανθρώπινο μάτι δεν μπορεί να ξεχωρίσει την διαφορά σε τέτοια εικόνα.
Συνημμένα
bg.png
Εικόνα

Απάντηση

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

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

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