Gå til innhold

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

Keiseren av Grønland

Anbefalte innlegg

Keiseren av Grønland

Keiseren av Grønland

Skrevet
Skrevet

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.

Videoannonse

Videoannonse
Annonse
Christerm

Christerm

Skrevet
Skrevet

Hei!

 

Dette kan du gjøre vha. CSS.

 

<style type="text/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!

Jonas

Jonas

Skrevet
Skrevet (endret)

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 av Jonas
  • 1 måned senere...
Keiseren av Grønland

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet

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

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet

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.

Themecreator

Themecreator

Skrevet
Skrevet (endret) 

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 av Themecreator
Keiseren av Grønland

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet (endret)

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 av Ramius
Keiseren av Grønland

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet

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

Kaptein Snus

Skrevet
Skrevet

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

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet (endret)

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 av Ramius
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

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

bilde4e.th.png

Resultatet ble slik:

bilde5f.th.png

 

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

Keiseren av Grønland

Keiseren av Grønland

Skrevet
  • Forfatter
Skrevet

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') );

?>

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...