Hey,

wie weet hoe ik zo een ding:

als text background gebruik zoals hier:

Dat is gewoon een background image.

http://jsfiddle.net/nkxskuk1/

alleen dan background-image ipv background-color

Als je zoekt op background sprite ofzo dan vind je het wel denk?

Bedankt iedereen!
Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Riick schreef:

Bedankt iedereen!
Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Afbeelding

Waarom probeer je het niet met een background image die je een background-size: cover; geeft?

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Bedankt iedereen!

Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Afbeelding

Waarom probeer je het niet met een background image die je een background-size: cover; geeft?

Dat veranderd helaas niks als ik het toepas.

Riick schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Bedankt iedereen!

Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Afbeelding

Waarom probeer je het niet met een background image die je een background-size: cover; geeft?

Dat veranderd helaas niks als ik het toepas.

Ik bedoel, maak van die 3 images 1 image en pas die toe op de h1.

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Bedankt iedereen!

Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Afbeelding

Waarom probeer je het niet met een background image die je een background-size: cover; geeft?

Dat veranderd helaas niks als ik het toepas.

Ik bedoel, maak van die 3 images 1 image en pas die toe op de h1.

En wat als je opeens een langere h1 hebt?

Dylan schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Riick schreef:

Bedankt iedereen!

Ik ben goed opweg, maar ik krijg nu de hele h1 vlak door de ::before en ::after heen.
Wie snapt de fout?

Codeblok (index.php):

1

Welkom op Bakkerijrecepten.nl!

Codeblok (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

h1::before {
background-image: url("images/template/h1-before.png");
padding: 0 13px;
content: "";
}

h1 {
background-image: url("images/template/h1.png");
display:inline-block;
padding-left: 13px;
padding-right: 13px;
position: relative;
}

h1::after {
background-image: url("images/template/h1-after.png");
padding: 0 13px;
content: "";
}

Afbeelding

Waarom probeer je het niet met een background image die je een background-size: cover; geeft?

Dat veranderd helaas niks als ik het toepas.

Ik bedoel, maak van die 3 images 1 image en pas die toe op de h1.

En wat als je opeens een langere h1 hebt?

Cover zorgt dat ie mee uitrekt.

Maar dan rekken je randjes ook uit en dat is niet mooi.

Probeer eens je before en after een hogere z-index te geven dan de h1 zelf.