Hvordan låse fast et bilde til bakgrunnen som motstår scrolling?

Keiseren av Grønland · 5. desember 2009

Jeg har lyst til å gi forumet mitt et bakgrunnsbilde.

Jeg har sett nettsider som har bilder i bakgrunnen som er konstante i sin plassering, i forhold til rammene på nettleseren. Hvordan gjør jeg dette?

Jeg vil ha et bilde som er låst nederst til venstre hjørne, og alltid holder seg der selv om man scroller.

Christerm · 6. desember 2009

Hei!

Dette kan du gjøre vha. CSS.

body

{

background-image:url('bilde.jpg');

background-repeat:no-repeat;

background-position: bottom left;

background-attachment:fixed

}

</style>

Denne koden skal være inne i <HEAD> </HEAD>

Lykke til!

Keiseren av Grønland · 6. desember 2009

Jeg har et eget CSS dokument for forumet, kan jeg ikke sette koden inn der, minus style?

Jonas · 6. desember 2009

Yo, foe shoe. Dersom det allerede finnes CSS-egenskaper for BODY, merge gjerne kodene sammen, så blir det litt ryddigere.

Keiseren av Grønland · 6. desember 2009

Ok prøver i kveld.

Det som gjør meg litt usikker er at forumet er delt inn i tre hovedruter, og har to CSS filer.

Jonas · 6. desember 2009

Gjør i praksis ingen forskjell hvor du plasserer koden, så lenge begge filene inkluderes overalt. Dersom den ene derimot ikke inkluderes overalt, så må du naturligvis plassere koden i den andre.

Endret 6. desember 2009 av Jonas

Keiseren av Grønland · 31. januar 2010

Hei igjen. Det ser ut som den koden der kom i konflikt med en annen kode.

Jeg måtte plassere den i Wrapper-delen av forumet, og resultatet blir at den andre bakgrunnen som brukes på toppen ikke fungerer. Her er koden:

#wrapper {
background-image:url('images/bakgrunn.png');
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed
background: #fff url('images/page_header_tile.png') repeat-x 0px -15px;

}

Keiseren av Grønland · 2. februar 2010

Bildet så fint plassert ut, men det var låst inni "Wrapper"-delen av forumet. Så når du scrollet helt ned til bånn, ville til slutt "footer"-delen rulle over halve bildet.

Det jeg kunne tenke meg er å låse bildet fast samme hva, som en slags eget transparent lag utenpå hele siden. Slik at det ble på plassen sin hele tiden, samma hva man gjorde.

Keiseren av Grønland · 3. februar 2010

bump

Themecreator · 5. februar 2010

body { 
background-image:url('images/bakgrunn.png');
background-repeat:no-repeat;
background-position: bottom right;
background-attachment:fixed
background: #fff url('images/page_header_tile.png') repeat-x 0px - 15px;
}

Kanskje "body" i stedet for "wrapper"...

Endret 5. februar 2010 av Themecreator

Keiseren av Grønland · 5. februar 2010

Når jeg satte den i body så endte den opp i footer. Med Wrapper som dekket for halve bildet.

Themecreator · 7. februar 2010

hadde du giddi å fiksa noen bilder... Klarer ikke helt å se det for meg...

Keiseren av Grønland · 7. februar 2010

Jeg lar forumet se råttent ut i håp om svar og hjelp noenlunde snart. Så da kan du se det "live" her:

http://www.michaeljackson.no/forum/

Bildet nederst til høyre der er helt riktig nå. Men bakgrunnen på toppen er borte. Jeg vil ha den tilbake. Det skal egentlig være en oransje strek på toppen. Her er nåværende kode:

#wrapper {
background: #fff url('images/page_header_tile.png') repeat-x 0px -15px;
	background-image:url('images/bakgrunn.png');
	background-repeat:no-repeat;
	background-position: bottom right;
	background-attachment:fixed
}

Som du ser blir bildet der skal være, men i tillegg til at header-bakgrunnen er inaktiv, blir bildet også dekket av footer når du scroller ned mot bånn.

Jeg prøvde å lage en helt egen tag, men det hjalp ikke.

Endret 7. februar 2010 av Ramius

Keiseren av Grønland · 7. februar 2010

Når jeg zoomer inn med IE, ser jeg at forumtabellen dekker bakgrunnsbildet. Dette vil jeg heller ikke ha.

Jeg vil at det bildet der skal være over alt som eventuelt kommer i veien. Det bildet skal være på toppen. Hvis dette hadde vært photoshop, skulle det altså vært det øverste laget.

Kaptein Snus · 8. februar 2010

CSS

#michael-j-pic {
position:fixed;
height:100%;
width:100%;
background:url("images/bakgrunn.png") no-repeat bottom right;
}

HTML Div som du putter rett etter body taggen

<div id="michael-j-pic"></div>

Og hvis det ikke hjelper kan du legge til z-index på diven.

z-index:1; /* Øk den om nødvendig */

Keiseren av Grønland · 8. februar 2010

Lek 1, jeg har lagt til CSS koden, men skjønner ikke hvor jeg skal ha html-diven ?

Jeg har ingen index-fil i det hele tatt.

Jeg prøvde med bare din kode, men da dukket ikke bilde opp.

Grunnen til at det er synlig nå er den gamle koden i innlegg#13

Endret 8. februar 2010 av Ramius

Kaptein Snus · 8. februar 2010

La til diven i FireBug, og så at at stylen allerede lå der, hehe Det eneste jeg endret i stylen var z-index:1;

Resultatet ble slik:

Du bare legger diven over wrapperen som du ser i firebug screenien

Keiseren av Grønland · 8. februar 2010

Jeg skjønner fortsatt ikke hvor jeg skal legge diven.

Hvilken fil er det snakk om, style.css ? Den har jo ingen html koder...

Kaptein Snus · 8. februar 2010

I stylesheeten din legger din inn:

#michael-j-pic {
position:fixed;
height:100%;
width:100%;
background:url("images/bakgrunn.png") no-repeat bottom right;
}

I http://www.michaeljackson.no/forum/index.php legger din inn denne diven rett etter body taggen din, før <div id="wrapper">

<div id="michael-j-pic"></div>

Endret 8. februar 2010 av Lek1

Keiseren av Grønland · 8. februar 2010

Men det er ingen slik fil.

Index-filen du sikter til har ingenting med templaten jeg bruker å gjøre. Og i templaten har jeg ingen index fil i det hele tatt.

Sånn ser den index-fila du snakker om ut:

<?php

require('./bb-load.php');

bb_repermalink();

$bb_db_override = false;
do_action( 'bb_index.php_pre_db' );

if ( isset($_GET['new']) && '1' == $_GET['new'] ) :
$forums = false;
elseif ( !$bb_db_override ) :
$forums = bb_get_forums(); // Comment to hide forums
if ( $topics = get_latest_topics( false, $page ) ) {
	bb_cache_last_posts( $topics );
}
if ( $super_stickies = get_sticky_topics() ) {
	bb_cache_last_posts( $super_stickies );
}
endif;

bb_load_template( 'front-page.php', array('bb_db_override', 'super_stickies') );

?>

Hvordan låse fast et bilde til bakgrunnen som motstår scrolling?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer