Text över bild

Har en bild som jag vill "göra" till en bakgrundsbild, eller rättare sagt få texten att skrivas över bilden.

Skulle vilja använda en class till detta så jag kan styra vilka bilder som ska vara "bakgrundsbilder",
typ:

.image-bkgr
{
display: under_texten;
}

Men som Ni ser förstår jag inte hur jag ska få till det...

Du kan göra på lite olika sätt. Ex. kan du göra en bakgrund i en tabell och sedan skriva texten i tabellen.

Vill du skapa en bakgrundsbild i CSS så kan du kolla in denna sidan som jag slängde ihop för länge sedan så kanske du kan få reda på den code du behöver göra.

http://www.axplock.com/make_stylesheet/

Mr T skrev:

Du kan göra på lite olika sätt. Ex. kan du göra en bakgrund i en tabell och sedan skriva texten i tabellen.

Neeeh, vill inte använda tabeller till detta.

Mr T skrev:

Vill du skapa en bakgrundsbild i CSS så kan du kolla in denna sidan som jag slängde ihop för länge sedan så kanske du kan få reda på den code du behöver göra.

http://www.axplock.com/make_stylesheet/

Fixa bakgrundsbilder i css klarar jag.
Jag har alltså en div som heter #content som ska vara utan bakgrundsbild i normalläget, men just på denna sida vill jag ha en bakgrundsbild och skulle därför vilja lösa detta med class eller liknande.

<div id="content" class="image-bkgr"></div> Borde väl fungera? Jag är lite lost här ;)

Är det hela diven som ska ha en bakgrundsbild eller är det paragraferna, eller bara några ord?
Vilket som, borde ju fungera med en class, men du behöver en url till bilden i din class. Någon display ska du inte behöva.
Eller är det inte alls det du menar?

voigtann1 skrev:

<div id="content" class="image-bkgr"></div> Borde väl fungera? Jag är lite lost här ;)

Öhhh, jaoo, men vad ska classen "image-bkgr" innehålla för kodsnutt? Vad kan man skriva för att en bild ska hamna bakom en text?

urlen till bilden...background: url(bilder/bilden.jpg);

Vet inte om jag förstått dig rätt eller om jag lägger det på fel ribba, men såhär hade jag gjort.

<div class="image_bkgr">Text här</div>

.image_bkgr
{
   width: 100px;
   height: 100px;
   background-image: url(bild.jpg);
}

tanten skrev:

Är det hela diven som ska ha en bakgrundsbild eller är det paragraferna, eller bara några ord?
Vilket som, borde ju fungera med en class, men du behöver en url till bilden i din class. Någon display ska du inte behöva.
Eller är det inte alls det du menar?

I detta fall blir det hela diven. En url till bilden har jag.

Är bilden så stor att den täcker hela diven eller behöver du repeata den?

DanneSt skrev:

I detta fall blir det hela diven. En url till bilden har jag.

Skriv in den i classen då:-)

Melea skrev:

Vet inte om jag förstått dig rätt eller om jag lägger det på fel ribba, men såhär hade jag gjort.

<div class="image_bkgr">Text här</div>

.image_bkgr
{
   width: 100px;
   height: 100px;
   background-image: url(bild.jpg);
}

Det verkar som att jag är lite luddig. :)

Kolla in länken: http://www.sonice.se/test/thestory.asp. Bilden på den glada tjejen (Ulrika btw...) vill jag ska vara i bakgrunden, med texten ovanpå.
Jag vill alltså inte att #content ska innehålla denna bakgrundsbild på varenda sida, därför lägger jag inte in den i stilmallen.

Du har ju inte bilden som en bakgrundsbild där.
Ta bort den och lägg in den som bakgrund i stället, som en class så dyker den inte upp på varje sida..

tanten skrev:

Du har ju inte bilden som en bakgrundsbild där.
Ta bort den och lägg in den som bakgrund i stället, som en class.

Jajjemen, det är precis det jag vill!! :D Men huuuuuur!?
Utan att få den som bakgrundsbild på alla sidor som har #content?

Som voigtann1 skrev t.ex... Eller går det inte att sätta en class på diven?

tanten skrev:

Som voigtann1 skrev t.ex... Eller går det inte att sätta en class på diven?

Ja, precis. Att sätta en class på <img> vore att föredra, men vad skriver man i classen för att få bilden att lägga sig bakom texten?
Tänker mig den funktionen som finns i Word (Formatera bildobjekt/Layout/Bakom text)...

Det finns ingen sådan funktion i css. Du får lägga bilden i en div som bakgrundsbild och skriva texten du vill ha i div:en.

:(
Ok, då får jag alltså skapa en variant av #content för varje sida, då de olika sidorna ska innehålla olika bakgrundsbilder?

Du kan försöka dra bilden till vänster med minus på margin-left, men det kommer förmodligen bli negativa konsekvenser för resten av sidan och hur det fungerar i olika webläsare är jag också osäker på.
typ #content img {float: right;margin-left:-350px;}

glömde minustecknet

tanten skrev:

Du kan försöka dra bilden till vänster med minus på margin-left, men det kommer förmodligen bli negativa konsekvenser för resten av sidan och hur det fungerar i olika webläsare är jag också osäker på.
typ #content img {float: right;margin-left:-350px;}

glömde minustecknet

Sitter på jobbet så jag kan inte testa själv, men kan måhända detta funka?

#content img {bakground-image: url(images/bild.jpg);}

Eller kanske nån lek med z-index?