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
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