Afbeelding als achtergrond waar je overheen kan schrijven

Goedenmiddag, misschien is er iemand die mij kan helpen met de juiste code.

Ik ben een website aan het maken in Weebly (CMS)

Nou wil ik graag zoals de header waar de afbeelding in zit met de oranje rand deze ook beneden aan de pagina, alleen dan de oranje rand met witte binnenkant (afmeting 860px bij 200px), waarin ik dan mijn contactgegevens kan plaatsen. Dus niet onder de pagina. Zie voorbeeld
http://testfamilydynamics.weebly.com/

Nu heb ik via een div een afbeelding geplaatst, maar ik zou deze het liefst als achtergrond zien zodat ik er met de CMS ook overheen kan schrijven of afbeeldingen in plaatsen.


Alvast bedankt!!

Zo ziet de CSS van de pagina er uit:



/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}

a img {
border: 0;
}

a {
color: #4D91D7;
text-decoration: none;
}

a:hover {
color: #85C20D;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/

body {
background: #EAE9E8;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #4d4d4d;
margin: 0;
padding: 0;
}

#wrap {
background: #eae9e8 url(oranje3.png);
width: 100%;
position: relative;
}

#container {
width: 920px;
margin: 0 auto;
background: url(header-highlight.png) top center no-repeat;
padding: 0 0 38px;
}

.header-wrap {
background: #fff;
}

#logo,
#logo a {

font-family: "Satisfy", Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: normal;
text-decoration: none;
line-height: 1;
color: #fefefe;
-webkit-text-stroke-width: 0.5px;
}

#header-right a {
color: #6d97bf;
}

#header-right a:hover {
color: #90c1f0;
}

#page {
width: 954px;
margin: 0 auto;
top: -60px;
position: relative;
}



#main-wrap {
background: url(main-shadow.png) center top repeat-y;
padding: 0 43px;
}

#main {
padding: 0;
border-top: none;
}

#content {
padding: 20px 0;
min-height: 400px;
}

h2 {
font-size: 1.7em;
margin: 0;
padding: .4em 0;
line-height: 1.2;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}

#content h2 {
color: #66a758;
}

p {
font-size: 1em;
line-height: 1.5;
margin: 0;
padding: .5em 0;
}

#content p {
color: #797979;
}

blockquote {
font-style:italic;
border-left:4px solid #ddd;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.5;
color:#999;
}

#content blockquote {
font-size:14px;
color:#aaa;
border-left:none;
background: url(blockquote-bg.png) no-repeat 5px 0px;
padding:0px 15px 15px 60px;
border:none;
margin:20px 0px;
}
#content .paragraph li {
list-style:none !important;
background:url(bullet-Blue-Green.png) no-repeat center left !important;
margin:0px !important;
padding-left:20px !important;
}

#content abbr {
border-bottom: 1px dotted #8f8f8f;
}

#banner {
background: #faa133;
padding: 8px;
border: 1px solid #d2d2d2;
}

/* Header Area
-------------------------------------------------------------*/

#header {
width: 100%;
height: 100px;
}

#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}

#header td {
vertical-align: middle;
text-align: left;
}

#logo {
padding: 10px 0 20px;
}

#header-right {
padding: 0 0 0 10px;
}

#header-right table {
width: 1px;
}

#header-right table,
#header-right .search,
#header-right .wsite-search {
clear: right;
float: right;
}

#header-right td {
padding: 0;
}

/* TOP RIGHT: Phone Number
--------------------------------------------------------------------------------*/

#header-right .phone-number .wsite-text {
color: #85c20d;
font-size: 20px;
font-weight: normal;
font-family: verdana;
text-decoration: none;
display: block;
white-space: nowrap;
margin: 60px 0px 5px 19px;
}

/* TOP RIGHT: Social Links
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
vertical-align: middle;
margin: -80px 30px 20px 10px;
}


.wsite-social-item {
width: 24px;
height: 24px;
margin: 0 0 0 3px;
background-image:url(social-Purple-Blue1.png);
}

.wsite-social-facebook {background-position:0 0;}
.wsite-social-facebook:hover {background-position:0 -23px;}
.wsite-social-facebook:active {background-position:0 -46px;}
.wsite-social-pinterest {background-position:-23px 0;}
.wsite-social-pinterest:hover {background-position:-23px -23px;}
.wsite-social-pinterest:active {background-position:-23px -46px;}
.wsite-social-twitter {background-position:-46px 0;}
.wsite-social-twitter:hover {background-position:-46px -23px;}
.wsite-social-twitter:active {background-position:-46px -46px;}
.wsite-social-linkedin {background-position:-69px 0;}
.wsite-social-linkedin:hover {background-position:-69px -23px;}
.wsite-social-linkedin:active {background-position:-69px -46px;}
.wsite-social-mail {background-position:-92px 0;}
.wsite-social-mail:hover {background-position:-92px -23px;}
.wsite-social-mail:active {background-position:-92px -46px;}
.wsite-social-rss {background-position:-115px 0;}
.wsite-social-rss:hover {background-position:-115px -23px;}
.wsite-social-rss:active {background-position:-115px -46px;}
.wsite-social-flickr {background-position:-138px 0;}
.wsite-social-flickr:hover {background-position:-138px -23px;}
.wsite-social-flickr:active {background-position:-138px -46px;}
.wsite-social-plus {background-position:-161px 0;}
.wsite-social-plus:hover {background-position:-161px -23px;}
.wsite-social-plus:active {background-position:-161px -46px;}
.wsite-social-vimeo {background-position:-184px 0;}
.wsite-social-vimeo:hover {background-position:-184px -23px;}
.wsite-social-vimeo:active {background-position:-184px -46px;}
.wsite-social-yahoo {background-position:-207px 0;}
.wsite-social-yahoo:hover {background-position:-207px -23px;}
.wsite-social-yahoo:active {background-position:-207px -46px;}
.wsite-social-youtube {background-position:-230px 0;}
.wsite-social-youtube:hover {background-position:-230px -23px;}
.wsite-social-youtube:active {background-position:-230px -46px;}


/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/

#header-right .search {
margin: 5px 0 5px 15px;
}

#header-right .wsite-search {
}

#header-right .wsite-search-input {
width: 152px;
height: 13px;
border: none;
padding: 8px 10px 10px !important;
color: #767776;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: url(input-bg.png) no-repeat;
}

#header-right .wsite-search-button {
position: relative;
width: 28px;
height: 31px;
color: #010101;
font-size: 12px;
border: none;
margin: 0;
padding: 0;
background: url(submit-bg-Blue-Green.png) no-repeat;
cursor: pointer;
}

/* PAGE TYPE: banner-landing
--------------------------------------------------------------------------------*/

.no-header-page #banner {
display: none;
}

.no-header-page #content {
padding-top: 0;
}

.landing-page #banner {
background: none;
border: none;
padding: 0 0 6px;
background: url(banner-landing-bdr.png) left bottom repeat-x;
}

#bannerleft {
float: left;
width: 547px;
position: relative;
margin: 0;
}

#banner-inner {
border: 1px solid #d2d2d2;
padding: 8px;
}

#banner-bot {
background: url(banner-left-bot.png) center bottom no-repeat;
padding-bottom: 31px;
}

.landing-page .wsite-header {
width: 528px;
height: 308px;
background: url(banner-landing.jpg) no-repeat;
border: 1px solid #ccc;
}

.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}

.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}

.landing-banner-inner {
#position: relative;
#top: -50%;
}

#bannerright {
margin: 0;
float: left;
width: 290px;
height: 328px;
padding: 0 0 0 20px;
}

#bannerright h2 {
color: #66a758;
font-size: 2em;
padding: 0px;
line-height: 100%;
}

#bannerright p {
color: #4d4d4d;
font-size: 1em;
padding: 20px 0px;
line-height: 140%;
}

#bannerright .wsite-button {
margin: 0px;
}

/* PAGE TYPE: banner-tall
--------------------------------------------------------------------------------*/
div#afbeelding{
background: #A0DCF8 url(footer.jpg)no-repeat;
height: 200px;
width: 860px;

}
.tall-header-page #banner {
}

.tall-header-page .wsite-header {
width: 848px;
height: 248px;
margin: 0;
background: url(banner-tall.jpg) no-repeat;
border: 1px solid #ccc;
}

/* PAGE TYPE: banner-short
--------------------------------------------------------------------------------*/

.short-header-page #banner {
}

.short-header-page .wsite-header {
width: 848px;
height: 168px;
background: url(banner-short.jpg) no-repeat;
border: 1px solid #ccc;
}

/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/

.splash-page #header {
width: 532px;
}

.splash-page #banner {
width: 527px;
height: 161px;
padding: 6px 4px 4px 6px;
background: url(banner-splash-bg.png) no-repeat;
}

.splash-page .wsite-header {
width: 515px;
height: 149px;
background: url(banner-splash.jpg) no-repeat;
}

.splash-page #content-container {
width: 528px;
}

.splash-page #content {
width: 528px;
}

.splash-page #footer {
width: 524px;
}

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap {
background: url(menu bot.png) no-repeat;
width: 862px;
margin: 0 auto 0 -96px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 0px 99px 0;
height: 30 px;
}

#topnav {
clear: both;
}

#topnav ul {
list-style: none;
float: right;
}

#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep-Blue-Green.png) right 12px no-repeat;
padding-right: 30px;
}

#topnav a {
float: left;
display: block;
color: #4D91D7;
font-size: 1.2em;
text-decoration: none;
padding: 15px 0px 15px 0px;
border: 0;
outline: 0;
text-transform: uppercase;
}

#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}

#topnav ul > li:first-child a,
#topnav ul > span:first-child li a {
padding-left: 0;
}

#topnav li#active a,
#topnav a:hover {
color: #85C20D;
border: 0;
}

/****************************** flyout menus ******************************/

.wsite-menu-wrap {
background: url(dropdown-bg-Blue-Green.png);
padding: 0;
}

#wsite-menus > .wsite-menu-wrap {
background: url(dropdown-box-Blue-Green.png) no-repeat !important;
padding: 0 0 0;
}

#wsite-menus > .wsite-menu-wrap > ul {
background: url(sub-menu-ul.png) repeat-x;
padding-top: 4px;
margin: 10px 0 0 0;
}

#wsite-menus .wsite-menu li {
width: 180px;
float: none;
margin: 0;
background: url(dropdown-bdr-Blue-Green.png) left bottom repeat-x;
}

#wsite-menus .wsite-menu > li:last-child {
background: none;
padding-bottom: 0;
}

#wsite-menus .wsite-menu li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 5px 4px;
color: #d8ecff;
background: none;
border: 0;
}

#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: url(dropdown-active.png);
}



/* Footer
--------------------------------------------------------------------------------*/


#footer-wrap {
background: #ffffff url(footer-wrap.png) repeat-x;
min-width: 920px;
top: -60px;
position: relative;
}

#footer {
background: url(main-bot-footer.png) no-repeat;
font-size: 12px;
color: #6f6f6f;
padding: 95px 42px 50px;
width: 870px;
margin: 0 auto;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
font-size: 13px;
}

#footer a {
color: #8ba0b4;
}

#footer a:hover {
color: #4f8ac3;
}

#footer .paragraph ul {
margin:0px !important;
padding:0px !important;
}


#footer .paragraph li {
list-style:none !important;
}

#footer span {
vertical-align: middle;
}

#footer h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #4d4d4d;
font-size: 1.2em;
padding: .5em 0;
margin-bottom:2px;
border-bottom:#bbb 1px solid;
}

.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 15px;
}

/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
display: inline-block;
color: #4d4d4d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
padding: 12px 0 5px 0;
}

.form-radio-container {
color: #4d4d4d;
font-size: 1em;
}

.wsite-form-input,.wsite-search-element-input {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
background: #fff url(field.png) repeat-x;
color: #777777;
border: 1px solid #bcbbbb;
padding: 7px 4px 6px !important;
line-height: 1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.form-select {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #777777;
font-size: 1em;
background: #fff url(field.png) repeat-x;
border: 1px solid #bcbbbb;
padding: 3px 4px;
width: 320px;
height: 27px;
line-height: 27px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Footer Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-container {
margin-top:0px !important;
text-align:left;
}

.wsite-footer .wsite-form-label {
font-size: 1em;
padding: 5px 0 2px 0;
}

.wsite-footer .wsite-form-field {
width:326px !important;
}

.wsite-footer .form-radio-container {
font-size:1em;
}

.wsite-footer .wsite-form-input {
font-size: 1em;
width: 100% !important;
}

.wsite-footer .form-select {
width: 100%;
}

/* Buttons
--------------------------------------------------------------------------------*/

/*
Buttons are styled with background image sprites. There are 4 unique image files:
- small & normal-colored (button_small_grey.png)
- large & normal-colored (button_large_grey.png)
- small & highlight-colored (button_small_orange.png)
- large & highlight-colored (button_large_orange.png)

Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
as well as an :active state (when the user presses down).

Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
image files to understand how the liquid-width nature of these buttons work.
*/

/* small */

.wsite-button {
color: #fff !important;
height: 34px;
font-size: 14px;
border: none;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 0 17px 0 0;
background: url(button-Blue-Green.png) no-repeat 100% -105px;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

.wsite-button:hover {
background-position: 100% -140px;
}

.wsite-button:active {
background-position: 100% -175px;
}

.wsite-button-inner {
color: #fff !important;
height: 34px;
line-height: 34px;
display: block;
font-size: 14px;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0 0 0 15px;
background: url(button-Blue-Green.png) no-repeat 0 0;
}

.wsite-button:hover .wsite-button-inner {
background-position: 0 -35px;
}

.wsite-button:active .wsite-button-inner {
background-position: 0 -70px;
}

/* large */

.wsite-button-large {
height: 41px;
background: url(button-large-Blue-Green.png) no-repeat 100% -126px;
padding: 0 18px 0 0;
}

.wsite-button-large:hover {
background-position: 100% -168px;
}

.wsite-button-large:active {
background-position: 100% -210px;
}

.wsite-button-large .wsite-button-inner {
color: #fff !important;
height: 41px;
line-height: 41px;
padding: 0 0 0 15px;
background: url(button-large-Blue-Green.png) no-repeat 0 0;
}

.wsite-button-large:hover .wsite-button-inner {
background-position: 0 -42px;
}

.wsite-button-large:active .wsite-button-inner {
background-position: 0 -84px;
}

/* highlight */

/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/

.wsite-button-large.wsite-button-highlight {
background-image: url(button-large-highlight-Blue-Green.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
color: #fff !important;
background-image: url(button-large-highlight-Blue-Green.png);
}

.wsite-button-highlight {
background-image: url(button-highlight-Blue-Green.png);
}

.wsite-button-highlight .wsite-button-inner {
color: #fff !important;
background-image: url(button-highlight-Blue-Green.png);
}

Rickert: dit kan gewoon hoor:



Online voorbeeld: http://codepen.io/anon/pen/ByKrwK
Ook voor ruimte-opvullende-achtergrond etc.

Toevoeging op 13/12/2014 21:57:22:

En voor een mooie oplossing voor tekst over afbeeldingen: http://css-tricks.com/design-considerations-text-images/
Vooral het laatste voorbeeld is erg mooi!

Goedendag allemaal,

Heel hartelijk bedankt voor het meedenken. Heb uiteindelijk een flexibele footer gevonden die ik boven de footer in de pagina heb geplaatst en zo werkt het CMS systeem van Weebly nog. Krijg niet helemaal een border er omheen (2 boven en 2 aan de zijkant die net niet aansluiten), maar goed.......

Fijne dag verder.

Hallo Rickert,

Zal je even aan de hand van een voorbeeld laten zien hoe ik het nu met een flexibele footer heb geprobeerd.

http://testfamilydynamics.weebly.com/

Jammer is alleen dat er ruimte blijft tussen de horizontale en verticale oranje border, maar zo blijft wel het CMS systeem werken en kan ik een link toevoegen aan het email adres bijvoorbeeld en aan het icon ervaringen.

Toevoeging op 14/12/2014 13:14:37:

Hoi Rickert,

Ben zo blij......doordat jij het over border had bedacht ik mij ineens nu het mij gelukt is de flexibele footer onderaan de pagina te plaatsen, dat ik de flexibele footer natuurlijk ook een border kan geven. Hoef ik dat niet via afbeeldingen te doen.

Zo werkt het CMS ook prima, kan ik veranderen wat ik wil en zie je die verandering meteen op alle pagina's.