Op de juiste manier achtergrond vullen

Ik probeer een eenvoudige website te maken met inhoudsachtergrond gecombineerd van drie afbeeldingen: de bovenste balk, de achtergrond van de inhoud en de onderste balk.

The problem is that content background appears under top and bottom bar, where should be transparency: enter image description here

Na en vóór het toevoegen van BG CSS:

background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;

.

background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;

Hoe kan ik dit oplossen?

Bewerk: Ik heb hetzelfde effect gemaakt met CSS3 en het probleem opgelost:

background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;
1
toegevoegd bewerkt
Bekeken: 3
de bron
ja ru fr es pt de ar
Ik weet het, maar hoe kan ik twee verschillende kleurenstreken maken, zoals mijn afbeeldingen?
toegevoegd de auteur Adrian Adamczyk, de bron
Gebruik CSS3 - border-radius: css3.info/preview/rounded-border
toegevoegd de auteur Tieson T., de bron
Randradius snijdt achtergronden ook bij, dus pas de eigenschap toe op de delen die u wilt rond maken. Als u alleen effen kleurenblokken gebruikt, gebruikt u gewoon achtergrondkleur en slaat u uw gebruikers enkele kilobytes op.
toegevoegd de auteur Tieson T., de bron
Vergeet niet om css3pie.com te gebruiken als je van oude IE-liefhebbers houdt.
toegevoegd de auteur biziclop, de bron

1 antwoord

De gemakkelijkste manier om dit te doen als je afbeeldingen gebruikt, is om een ​​div te maken voor elke afbeelding in een container en de achtergrond te besturen via CSS-eigenschappen of door de afbeelding gewoon in de div te plaatsen. Het probleem dat u ondervindt, is dat de bovenste afbeelding de achtergrondafbeelding overlapt, omdat het één div is. Splits het en het zal het probleem sorteren, bijvoorbeeld:

<div id="wrapper">
    <div id="top"></div>
    <div id="middle">
        <!-- Content in here -->
    </div>
    <div id="bottom"></div>
</div>

Op die manier worden alle div's binnen een omhulsel gehouden. Mogelijk moet u float toepassen: links! Belangrijk; naar sommige van de div's als je problemen hebt om ze op de juiste manier op te stellen. Maar dit is wat ik doe, en het werkt perfect :)

Andy

2
toegevoegd
de bron