Hvordan gjør man det - transparent div id & heldekkende bakgrunn.

[OMGalarm]

Hei!

 

Jeg er i ferd med å lage et nytt Wordpress-theme ettersom jeg er fryktelig lei av mitt nåværende. Jeg har fortsatt et standard oppsett med header, og to kolonner - sidebar og container for blogginnlegg og tekst. Men jeg har en idè som jeg bare ikke greier å gjennomføre, uansett hvor mye jeg søker på Google etter måter å gjøre det på:

 

1: Bak sidebar og blogginnlegg vil jeg ha en boks, en div id, som er transparent.

2: Jeg vil ha et bakgrunnsbilde som dekker hele siden, og ikke rører seg når man blar, og som passer alle skjermer.

 

Jeg har funnet et side som har akkurat dette slik at dere skjønner hva jeg mener: (den har en splash side, så man må trykke enter) http://mychemicalromance.com

 

Jeg regner med jeg må lage en egen id for den transparente boksen, og ha noen spesielle CSS instillinger der? Og bildet må sikkert ha en helt spesiell størrelse og kode.

 

Håper noen kan og vil hjelpe meg!

[MikkelRev]

Har du sett, googlet og lest om css background og opacity ?

[OMGalarm]

Jeg har vært innom og søkt på det meste, men finner egentlig ingenting som er lett forklart slik at jeg skjønner om det de forklarer i det hele tatt har noe med dette å gjøre.

[Thomas.]

For å få en bakgrunn til å følge nedover når du scroller bruker du position: fixed.

 

Transparent bakgrunn, du mener gjennomsiktig farge?

Da lager du et bilde i photoshop, hvit rektangel med opacity på 50% kanskje, så setter du dette som bakgrunn med repeat-y på en div rundt de to andre divene dine, og padding etter eget ønske.

 

Eller du kan gi bakgrunnsfarge hvit istedenfor et bilde, og bruke funksjonen opacity.

[OMGalarm]

Takk Thomas!

 

Jeg har en del problemer fortsatt, blant annet funket det ikke med position:fixed, for da ble alt hvitt. Skal dette kodes inn på en spesiell måte? Jeg bruker nå repeat-y, men som du ser så er den fortsatt i bevegelse når jeg blar, ettersom jeg har laget en bakgrunn med største skjermstørrelse 1600x1200, slik at den skal passe alle: http://stinebusch.com/wordpress

 

Jeg gjorde som du sa og lagde en div med transparent bakgrunnsbilde, ettersom den tutorialen om opacity ikke funket for meg. Men problemet er dette ses på siden: den er så brei som den skal være, og den omfavner både sidebar og blogginnlegg, men den er ikke høyere enn den paddingen jeg skrev inn.. jeg vil jo at den skal gå helt ned, under begge div'ene..

 

Koden for den i CSS:

#whitebox{
background: url("images/bg.png");
width: 800px;
padding: 20px;
margin-bottom: 30px;
}

 

Index-filen:

<?php get_header(); ?>

<div id="whitebox"> 

<?php get_sidebar(); ?>

<div id="container">

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

	<div class="post" id="post-<?php the_ID(); ?>">

		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="title"><?php the_title(); ?></a></h2>

		<p class="postmetadata">
				skrevet av: <?php  the_author(); ?> <br />
				kategorier: <?php the_category(', ') ?> <br />
				kommenter: <?php comments_popup_link('Ingen kommentarer »', '1 Kommentar »', '% Kommentarer »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
		</p>

				<div class="entry">

					<?php the_content(); ?>

				</div>

	</div>

<?php endwhile; ?>

	<div class="navigation">
		<?php posts_nav_link(); ?>
	</div>

<?php else : ?>

	<div class="post">
		<h2><?php _e('Not Found'); ?></h2>
	</div>

<?php endif; ?>

<?php get_footer(); ?>

</div>

</div>

[Thomas.]

Takk Thomas!

 

Jeg har en del problemer fortsatt, blant annet funket det ikke med position:fixed, for da ble alt hvitt. Skal dette kodes inn på en spesiell måte? Jeg bruker nå repeat-y, men som du ser så er den fortsatt i bevegelse når jeg blar, ettersom jeg har laget en bakgrunn med største skjermstørrelse 1600x1200, slik at den skal passe alle: http://stinebusch.com/wordpress

 

Ops, skrev litt feil i forrige innlegg! Beklager

Du skal ikke ha noe position funksjon på bakgrunnen, bare attachment.

 

Eksempel:

body {
   background:url(link);
   background-attachment:fixed;
}

 

Eller:

body {
   background:url(link) fixed;
}

 

Jeg gjorde som du sa og lagde en div med transparent bakgrunnsbilde, ettersom den tutorialen om opacity ikke funket for meg. Men problemet er dette ses på siden: den er så brei som den skal være, og den omfavner både sidebar og blogginnlegg, men den er ikke høyere enn den paddingen jeg skrev inn.. jeg vil jo at den skal gå helt ned, under begge div'ene..

 

Da legger du til <div style="clear:both;"> </div> rett før slutt-taggen til whitebox! (</div>)

 

Også vil jeg bare si at det finnes skjermer mye større enn 1600x1200. Har selv 1920x1080.

Si ifra om du får problemer

Endret 26. september 2010 av Thomas.

[OMGalarm]

Begge funket! Tusen takk for hjelpen.

[OMGalarm]

Men foresten, finnes det noen kode som gjør at hele bakgrunnsbildet vises selv på små skjermer? Jeg har lastet opp et stort bilde, så på min 1280x800 skjerm vises kun en liten del av bildet..

Endret 26. september 2010 av OMGalarm

[Thomas.]

Men foresten, finnes det noen kode som gjør at hele bakgrunnsbildet vises selv på små skjermer? Jeg har lastet opp et stort bilde, så på min 1280x800 skjerm vises kun en liten del av bildet..

 

Vel, du kan jo gjøre slik siden du linket til har gjort.

 

 

<div id="background"><img width="100%" height="100%" src="http://download.wbr.com/drupal6x/cores/latest/sites/mcr6/themes/mcr/images/v2/bodyBackground.jpg" /></div>

 

Da setter du bildet til 100% i leserens nettleservindu.