Διπλό background. Γίνεται;

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

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

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 06 Δεκ 2008 20:10

Αυτό που θέλω - σκέφτομαι να κάνω:

1) Μια εικόνα background η οποία επαναλαμβάνεται οριζόντια και κάθετα.

2) Mια εικόνα background κεντραρισμένη κι επαναλαμβάνεται μόνο κάθετα και πάνω από την (1).

Γίνεται κάτι τέτοιο;

Edit:
Επεξήγηση: Πρόκειται για περίπτωση ενός fixed width template. Η εικόνα (1) γεμίζει όλο το κενό [το 100% σαν να λέμε]. Το fixed width column θέλω να γεμίζει με ένα συγκεκριμένο χρώμα, οπότε σκέφτηκα μια οριζόντια λωρίδα που θα επαναλαμβάνεται προς τα κάτω.
Κάποια λύση για το παραπάνω (ή εναλλακτική);

Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 06 Δεκ 2008 20:58

για δοκιμασε αυτο :-?

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

body {
	margin: 0;
	padding: 0;
	background: #e5e5e5 url(background01.jpg) repeat;
	position: relative;
}

#bgt {       

   height: 100%;
	width: 50%;
	left:25%;
   top:0;
	background: url(background.jpg) repeat-x;
	position:fixed;
	background-position:center;
}

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

<body>
<div id="bgt"></div>
</body>
edit:
top:0;
I Hate My Notepad


Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 06 Δεκ 2008 21:29

δεν σου βγαινει σωστα ή δεν βγαινει ετσι οπως το θες;
φτιαξε μια εικονα για να δουμε πως θες να ειναι

αυτο που σου δινω εγω ειναι κατι σαν αυτο
Συνημμένα
ScreenShot014.gif
I Hate My Notepad

Άβαταρ μέλους
af
Honorary Member
Δημοσιεύσεις: 2928
Εγγραφή: 06 Ιούλ 2003 17:18
Τοποθεσία: Γλυφάδα
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από af » 07 Δεκ 2008 04:58

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

#body-div-back &#123; 
	background&#58; url&#40;'image'&#41; no-repeat bottom center;
	height&#58; 100%;
	padding&#58;0px 10px 0px 0px;  
	&#125;

#body-div-front &#123; 
	background&#58; url&#40;'image'&#41;  no-repeat top center;
	height&#58; 100%;
	&#125;
Δεν ξέρω αν κατάλαβα καλά αυτό λες αλλά ίσως αυτό σαν παράδειγμα βοηθήσει...

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 07 Δεκ 2008 14:58

Αυτό θέλω να κάνω (βλ. εικόνα)

Μια εικόνα κανονικό background [όπως αυτή με το σήμα] και στο κέντρο μια εικόνα που θα επαναλαμβάνεται προς τα κάτω, πίσω από τα περιεχόμενα του fixed width περιεχομένου [εδώ έχω χρησιμοποιήσει μια εικόνα που αποτελεί σκέτο χρώμα]..
Συνημμένα
Image1.jpg

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από Basilakis » 07 Δεκ 2008 15:40

Βάλε σαν κεντρικό background Την μαύρη με τα σήματα που έχεις και μετά κάνε ένα DIV, με τις διαστάσεις που θέλεις, βάλε μέσα το άλλο background και εκει μέσα και το περιεχόμενό σου..

Όπως τα έγραψε η af νομίζω!

Άβαταρ μέλους
af
Honorary Member
Δημοσιεύσεις: 2928
Εγγραφή: 06 Ιούλ 2003 17:18
Τοποθεσία: Γλυφάδα
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από af » 07 Δεκ 2008 16:17

Πιστεύω με τα div's θα κάνεις αυτό που θέλεις
π.χ. εγώ που ήθελα να κάνω 2 images background
αλλα στην περιπτωση μου πάνω + κάτω δούλεψε
δηλ. εδώ http://www.xorganosis.gr

Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 07 Δεκ 2008 17:37

σύνφωνα με την εικονα που εδωσες ο κωδικα που σου εδωσα πιο πανω κανει αυτο που θες (δες εικονα) δεν καταλαβα που κολλας :-?

απλως αμα θες το περιεχομενο σου να ειναι μεσα στο δευτερο background καλυτερα να κανεις αυτο που λεει Basilakisweb και η af :wink:
Συνημμένα
ScreenShot015.gif
I Hate My Notepad

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 08 Δεκ 2008 00:28

Ευχαριστώ παιδιά!

Απλά επειδή γίνεται ένας κακός χαμός με τα divs στο αρχείο php, έχω κολλήσει στο πού πρέπει να εισάγω το <div> με το "δεύτερο" background...

Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 08 Δεκ 2008 10:28

σε περιπτωση που θες το περιεχομενο να ειναι μεσα στο δευτερο background κανεις αυτο

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

body &#123; 
   margin&#58; 0; 
   padding&#58; 0; 
   background&#58; #e5e5e5 url&#40;background01.jpg&#41; repeat; 
   
&#125; 

#container &#123; 
margin&#58; 0 auto; 
padding&#58; 0px;
background&#58; #e5e5e5 url&#40;background02.jpg&#41; repeat-x;
&#125;
σημ. στο container βαλε και τις διαστασεις που θες
και βαζεις το περιεχομενο αναμεσα στο container

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

<body>

<div id="container"></div>

</body>
αλλιως κανεις αυτο

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

body &#123; 
   margin&#58; 0; 
   padding&#58; 0; 
   background&#58; #e5e5e5 url&#40;background01.jpg&#41; repeat; 
   position&#58; relative; 
&#125; 

#bgt &#123;        

   height&#58; 100%; 
   width&#58; 50%; 
   left&#58;25%; 
   top&#58;0; 
   background&#58; url&#40;background.jpg&#41; repeat-x; 
   position&#58;fixed; 
   background-position&#58;center; 
   z-index&#58;-10;

#container &#123; 
margin&#58; 0 auto; 
padding&#58; 0px;
z-index&#58;1;
&#125;

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

<body><div id="bgt"></div>

<div id="container"></div>

</body>
το περιεχομενο το βαζεις παλι μεσα στο container και το bgt το βαζεις αμεσως μετα το body και δεν βαζεις τιποτα αναμεσα του η μπροστα του
I Hate My Notepad

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 08 Δεκ 2008 16:47

Παιδιά, έχω μπερδευτεί επειδή είναι ένα joomla template...

Θα κάνω δοκιμές και θα ενημερώσω!

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 11:29

Το δοκίμασα, αλλά δεν το εμφανίζει!

Στο template.css υπάρχει το body το οποίο περιέχει το "πίσω" background [αυτό με το σήμα με τον dj που σας έδειξα παραπάνω ας πούμε].

Έστω ότι κάνω αυτό που είπε ο WNAT για το δεύτερο background [το κεντραρισμένο fixed width], πού θα πρέπει να βάλω το ανάλογο div?

Παραθέτω τον κώδικα της σελίδας, μπορείτε να με βοηθήσετε;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div id="main">
<div class="header">
<div class="anim">
</div>
<div class="title">
<?php echo $mosConfig_sitename; ?></div>
<div style="clear:both"></div>
</div>

<div class="navbar">
<div class="nav">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>

<div class="mainColumn">
<div id="leftColumn" class="column">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
<div class="contentColumn">
<div id="rightColumn" class="column">

<jdoc:include type="modules" name="top" style="rounded" />


<jdoc:include type="modules" name="right" style="rounded" />
</div>
<div id="inner_contentColumn" class="mc">
<div><div><div><div>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr class="latest" valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>

</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline">&nbsp;</td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
</td>
<?php endif; ?>
</tr>
</table>

<div id="maindivider"></div>
<?php endif; ?>

<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />

</td>
</tr>
</table>
</div></div></div></div>

</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer">
<div style="color:#698F48;"><center><jdoc:include type="modules" name="footer" style="xhtml"/></center></div>
</div>
</body>
</html>

Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 09 Δεκ 2008 11:51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body><div id="bgt"></div>
<div id="main">
<div class="header">
<div class="anim">
</div>
<div class="title">
<?php echo $mosConfig_sitename; ?></div>
<div style="clear:both"></div>
</div>

<div class="navbar">
<div class="nav">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>

<div class="mainColumn">
<div id="leftColumn" class="column">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
<div class="contentColumn">
<div id="rightColumn" class="column">

<jdoc:include type="modules" name="top" style="rounded" />


<jdoc:include type="modules" name="right" style="rounded" />
</div>
<div id="inner_contentColumn" class="mc">
<div><div><div><div>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr class="latest" valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>

</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline">&nbsp;</td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
</td>
<?php endif; ?>
</tr>
</table>

<div id="maindivider"></div>
<?php endif; ?>

<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />

</td>
</tr>
</table>
</div></div></div></div>

</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer">
<div style="color:#698F48;"><center><jdoc:include type="modules" name="footer" style="xhtml"/></center></div>
</div>
</body>
</html>
I Hate My Notepad

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

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 16:28

Δυστυχώς τίποτα...

Το έβαλα εκεί που μου είπες και δεν εμφανίζεται...

Ορίστε το css που αφορά τα backgrounds:
body
{
margin:0px;
font-family:Arial;
font-size:12px;
background:#243515;
background:url(../images/wood.jpg);
background-attachment:fixed;
}

#bgt
{

height:100%;
width:760px;
top:0;
background: url(../images/footer.jpg) repeat-x;
position:fixed;
background-position:center;
}
Τι κάνω λάθος; :(

Απάντηση

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

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

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