[HTML/CSS] Horizontaal uitvullen background image - Softwareontwikkeling

maandag 22 oktober 2007 12:36

Acties:

Remember, Remember..

Topicstarter

Ik heb voor een website een bepaalde stijl ontworpen. Nu wil ik in het midden een DIV (container) hebben van 785px breed met de content. Nou heb ik een headerimage wat uitloopt aan de linkerkant. Stel dat iemand een scherm heeft van 800px wil ik dat de container het midden is deze ook in het midden uitlijnd. Stel dat iemand een breder scherm heeft (de meeste ofcourse) dan wil ik dat hij aan de linkerkant het stukje erbij plakt. Wat is de beste manier om dit aan te pakken? Een bodybg image waarvan je gewoon meer ziet? Of een soort extra DIV die aan de linkerkant float oid?

Ik heb dus een plaatje van totaal 906 pixels (header). Hiervan wil ik dus dat ie eigenlijk het midden berekend aan de hand van de 785 pixels en de overige 121 pixels er optioneel aan vast plakt

Ik heb nu de volgende code:

HTML:

    <body>
        <div id="container">
            <div id="header">
            </div>
        </div>
    </body>
</html>

code:

body {
background: #e9ead2;
margin: 0px;
padding: 0px;
}

#container {
text-align: middle;
margin: auto;
width: 785px;
background-image: url(images/bodybg2.jpg);
background-repeat: no-repeat;
background-position: right;
}

#header {
margin: auto;
width: 785px;
height: 250px;
}

Afbeeldingslocatie: http://img132.imageshack.us/img132/7836/opzetjepj8.th.jpg

[ Voor 13% gewijzigd door GandalfTheGrey op 22-10-2007 12:40 ]

Computer Specs

maandag 22 oktober 2007 12:39

Acties:

CH4OS

It's a kind of magic

Maak van

code:

1	background-posistion: right;

eens

code:

1	background-posistion: center;

van...

Zie ook CSS background-position Property. Aangezien je hem helemaal gecentreerd wil hebben is een enkele benoeming van center voldoende...

Speel er anders eventjes mee

[ Voor 86% gewijzigd door CH4OS op 22-10-2007 12:43 ]

maandag 22 oktober 2007 12:41

Acties:

GandalfTheGrey

Remember, Remember..

Topicstarter

Gedaan, maar dat doet niks omdat ie in het blok van 785pixels breed zit

Computer Specs

maandag 22 oktober 2007 12:43

Acties:

CH4OS

It's a kind of magic

GandalfTheGrey schreef op maandag 22 oktober 2007 @ 12:41:
Gedaan, maar dat doet niks omdat ie in het blok van 785pixels breed zit

Ik zou het in ieder geval zoeken in de background-position property...

Check anders eerder genoemde URL even...

maandag 22 oktober 2007 12:47

Acties:

GandalfTheGrey

Remember, Remember..

Topicstarter

Ik had hem op rechts gezet zodat vanuit de container die in het midden staat het stuk wat over blijft links uitvult. Het probleem is dat de container nu 785px is dus de background-image nooit meer dan 785 pixels laat zien.

[ Voor 3% gewijzigd door GandalfTheGrey op 22-10-2007 12:48 ]

Computer Specs

maandag 22 oktober 2007 13:05

Acties:

GandalfTheGrey

Remember, Remember..

Topicstarter

GJ-tje schreef op maandag 22 oktober 2007 @ 12:43:
[...]
Ik zou het in ieder geval zoeken in de background-position property...
Check anders eerder genoemde URL even...

Ik wil hem dus niet in het center, maar het midden van het plaatje zou berekend moeten worden als 121 + (785/2) pixels!

het gaat er dus om dat je geen horizontale scrollbalken krijgt en je dus een basis van 785 pixels container in het midden hebt. Deze container moet dan het plaatje van 960 pixels met de 785 meest rechtse pixels bevatten.

[ Voor 30% gewijzigd door GandalfTheGrey op 22-10-2007 13:27 ]

Computer Specs

maandag 22 oktober 2007 16:13

Acties:

GandalfTheGrey

Remember, Remember..

Topicstarter

De oplossing was het plaatje te vergroten ook aan de rechterkant en met een 100% width div in het midden werken.

code:

#container {
text-align: middle;
margin: auto;
width: 100%;
background-image: url(images/header2.jpg);
background-repeat: no-repeat;
background-position: center;
}

#header {
position: relative;
margin: auto;
width: 785px;
height: 250px;
}

Computer Specs

dinsdag 23 oktober 2007 17:37

Acties:

XangadiX

trepanatie is zóó kinderachtig

Het is de topic kicker!!

Afbeeldingslocatie: http://www.xangadix.net/public/topickicker.jpg

ahum, ow wacht dat mag natuurlijk niet. Waar ik je enigzsinds subtiel op probeer te wijzen is dat het niet bedeling is om je eigen topic de hele tijd te kicken.

Maar ik vind het wel weer erg goed dat je even de oplossing post bij je probleem

[ Voor 6% gewijzigd door XangadiX op 23-10-2007 17:42 ]

Stoer; Marduq

Pagina: 1

Reageer