webForumDet fria alternativet
Logga in / Bli medlem

background:transparent vill inte

HTML & CSS

6 svar · 425 visningar · startad av Yoda

Yodas avatarYodaMedlem sedan nov. 2002291 inlägg
Frågan#1

Jag har hittat en lysande mall på design/css här på wF som någon varit snäll och hjälpt till med. Jag försöker nu ändra lite så den blir så som jag vill ha den. Men det fungerar inte riktigt som jag vill.

background-color: transparent; fungerar inte. Jag har även testat background:transparent; men fungerar inte det heller. Varför syns inte bilden bakom som jag lagt i #background?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;} /* nollställ marginaler och indrag för alla element */
html,body { 
color: #000; 
background-color: #fff;
height: 100%; /* se till att vi kan utnyttja hela visningsytan */
text-align: center;  /* centrera #container a'la bluerobot.com del 1 */
}
p {
font-family: arial, sans-serif;
font-size: 12px; line-height: 18px;
background-color: transparent;
padding: 5px 10px 5px 10px;
}
#container {
width: 740px; /* innehållets totala bredd */
min-height:100%;  /* ta upp hela sidan (se MISIE-hack nedan) */
background-color: transparent;
/*background-image: url(images/bild2.jpg);*/ /* Se alistapart.com "faux columns" */
margin:0 auto;  /* centrera #container a'la bluerobot.com del 2 */
text-align: left; /* ... och del 3 */
}
#background{
z-index: 1;
background-image: url(images/bild2.jpg);
background-repeat: no-repeat;
}
#header{
height: 80px;
background-color: transparent;
padding-top: 15px;
/*background-color:#c44;*/
}
#menu {
height: 23px;
background-color: #cc8;
}
/* tvåspaltad lösning a'la realworldstyle.com del 1*/
#sidebar {
width: 370px; /* skall vara mindre än margin-left på #main (med marginal) */
float: left;
/*background-color: #ce9;*/
background-color: transparent;
padding-top: 50px;
padding-bottom: 15px;
}
/* tvåspaltad lösning a'la realworldstyle.com del 2*/
#main {
width: 310px; /* width+margin-left skall vara < width på #container, med marginal  */ 
margin-left: 420px; /* något mer än bredden på #sidebar */
/*background-color: #739dc7;*/
background-color: transparent;
padding-top: 50px;
}
/* sidfotsmek */
#belowthebottom {
height: 28px;  /* samma som #bottom */
clear: both;
}
#bottom{
width: 740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color: #002d56;
color: #FFF;
margin-top: -28px; /* samma som height */
margin-left: auto;
margin-right: auto;
}
#bottom a:link{
color: #FFFFFF;
}
#bottom a:visited{
color: #FFFFFF;
}
#bottom a:hover{
color: #FFFFFF;
}
#bottom a:active{
color: #FFFFFF;
}

</style>

<!--[if IE]>
<style type="text/css">
/* fulhack - nödvändigt bl.a. pga att MSIE inte förstår min-height */
#container {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="container">

	<div id="background">&nbsp;</div>

	<div id="header">
		<img src="images/logga.jpg"/>
	</div>
	
	<div id="menu"><p>menu</p></div>
	
	<div id="sidebar">
		<p>sidebar</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
		tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
		orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
		purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
		risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
		Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
		arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
		dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
		diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
		platea dictumst.</p>

	</div>
	
	<div id="main">		
		<p><img src="images/bild1.jpg"/></p>		
		<p>main</p>
	</div>
	
	<div id="belowthebottom">&nbsp;</div>

</div>

<div id="bottom">
	<p>
		&copy; AB FÖRETAG&nbsp;&nbsp;&nbsp;|
		&nbsp;&nbsp;&nbsp;Kungsgatan 20, 123 45 Stockholm&nbsp;&nbsp;&nbsp;|
		&nbsp;&nbsp;&nbsp;Tel: 08-123 45 67&nbsp;&nbsp;&nbsp;|
		&nbsp;&nbsp;&nbsp;Fax: 08-123 45 67&nbsp;&nbsp;&nbsp;|
		&nbsp;&nbsp;&nbsp;<a href="mailto:office@foretag.se">office@företag.se</a> 
	</p>
</div>

</body>
</html>

Det enda som syns av bilden i bakgrunden är de 15px som jag har som padding-top i #header, konstigt tycker jag. Det hoppas jag att inte ni tycker... :)

jarvkloMedlem sedan juli 20013 378 inlägg
#2

Hej Titti!

Eftersom jag är "pappa" till den mall du utgick ifrån tänkte jag se om jag inte kunde bistå med lite hjälp...

Först och främst undrar jag om inte dina problem kommer ifrån koden:

<div id="background">&nbsp;</div>

#background kan aldrig bli högre än typsnittshöjden + ev. padding som den ärver... Och bakgrundsbilden i #background "klipps" automatiskt så att den aldrig "flyter ut" utanför kanterna...

Om du vill testa transparent förresten - så sätt en background-image: på #container så får du se att den bilden visas även "bakom texten" i <p>-taggarna (tack vare background-color: transparent som du deklarerat för <p> i stilmalen).

Vad är det egentligen du försöker göra som du inte får till? :bire

Yodas avatarYodaMedlem sedan nov. 2002291 inlägg
#3

Aha, jag fattar. Då har jag lagt bilden så här istället

<div id="background">
   <img src="images/bild2.jpg"/>
</div>

Så nu syns hela bilden men nu kommer den ju inte under de andra lagren utan ovanför och puttar ner övriga lager. Jag har testat att sätta

z-index: 1;

på bakgrunden och

z-index: 2;

på övgriga lager men bilden vill ändå inte lägga sig bakom.
Vad är det som är fel?

jarvkloMedlem sedan juli 20013 378 inlägg
#4

Hmm...

Det räcker normalt inte med att bara lägga dit ett z-index... och du *kan* naturligtvis sätta position:absolute på #background och #header och experimentera med z-index - Nackdelen är att positioneringen också "lyfter ut" blocken ur flödet och gör att du antagligen måste kompensera med en padding-top (eller liknande) i #container eller #menu för att få till det...

Kan gå - men...

... om du "bara" är ute efter att lägga en bakgrundsbild under en del av layouten (typ sidhuvudet och menyn ? ) så kan du ju istället försöka baka in de block som du vill ha ovanpå bilden i en ny container och sedan lägga bakgrundsbilden som background-image på den containern ...

Om inte annat slipper du en del potentiella problem med position:absolute om du gör så istället som jag ser det (det finns en ryggsäck av gamla buggar man kan gå på där om man har otur - men det är en annan historia)

Du har inte lust att bifoga en skiss på vad du vill få till ?

Yodas avatarYodaMedlem sedan nov. 2002291 inlägg
#5

Tja, alltså, jag vill ju helst inte använda mig av position:absolut. Det har jag gjort alldeles för mycket nu och jag tänkte försöka lära mig av med det. Så helst inte den varianten.

Bagrundsbilden vill jag ska ligga under sidbar och main. Du kan se hur jag menar här: http://www.webforum.nu/showthread.php?t=133153

design7 är förstasidan och design8 är undersidorna. Förstasidan har jag inte fått till ännu, där ska jag ju ha ytterligare ett lager mellan bottom och sidbar/main.

Du förstår va?

jarvkloMedlem sedan juli 20013 378 inlägg
#6

Jadåså :e

Prova att lägga bilden med "treudden" som bakgrundsbild i #container och se till att den inte repeteras (background-repeat: no-repeat). Om du behöver flytta runt den - kan du förmodligen få till det med background-position: - men varning utfärdas, för här är MSIE och t.ex. FireFox fortfarande oense om huruvida "origo" är fönstrets eller #containers övre väänstra hörn...

Men å andra sidan - med vit bakgrundsfärg bör bilden kunna bli hyfsat komprimerad även om du klipper till den i "rätt storlek" med en "lämplig dos vitt indrag på toppen" (om du är med på vad jag menar) :)

När du sedan lagt in bilden som bakgrund i #container, tar du helt enkelt bara bort alla bakgrundsfärger och -bilder i #sidebar och #main.

Förresten - Ett annat alternativ är också att lägga in en ny container (med ett nytt fiffigt och unikt namn) runt #sidebar och #main och lägga in bilden som bakgrundsbild på den nya containern istället - På så sätt kan du "klippa" bakgrundsbilden effektivare ;)

Kör hårt!

Yodas avatarYodaMedlem sedan nov. 2002291 inlägg
#7

Tusen tack! :birp Det fungerar perfekt! Jag gjorde en ny container och så la jag in vitt ovanför så fick jag den var jag ville ha den.

Tack, tack! :e

270 ms totalt · 3 externa anrop · v20260731065814-full.767b4345
131 ms — deklarationer (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)