Tekst en button over background image gooien
Just a question. Ik ben bezig met een afbeelding :).
Niet zomaar een, maar een background-img in de css.
Nu wil ik er een button op plaatsen (ben ik mee bezig), en wat tekst.
Wat is de beste manier om dit te doen :)
html
Code (php)
css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
.home article .row:last-of-type {
width: auto;
position: relative;
text-align: center;
color: purple;
//background: pink;
height: 620px;
background-position:center;
background-image:url('http://via.placeholder.com/1920x1080');
}
?>
.home article .row:last-of-type {
width: auto;
position: relative;
text-align: center;
color: purple;
//background: pink;
height: 620px;
background-position:center;
background-image:url('http://via.placeholder.com/1920x1080');
}
?>
Gewijzigd op 07/03/2018 11:25:56 door Daan s
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
background-color:#fff;
font-family: "Magra", sans-serif;
font-size: 15px;
color:white;
margin:0 auto;
height:100%;
background: url(Dirty_Blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
background-color:#fff;
font-family: "Magra", sans-serif;
font-size: 15px;
color:white;
margin:0 auto;
height:100%;
background: url(Dirty_Blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
En ja, er moet één button op, "JA IK WIL KOPEN!"
Wellicht zou je uit oogpunt van zoekmachine-optimalisatie de afbeelding uit de (CSS) achtergrond kunnen trekken en een omschrijvende bestandsnaam en alttekst kunnen geven ofzo en wellicht wel meer truuks om extra metadata aan een afbeelding op te hangen. In dat geval zou je de button over de afbeelding heen kunnen plaatsen met behulp van z-indexen. Op deze manier haal je waarschijnlijk "meer kilometers" uit een afbeelding en krijgt deze echt betekenis in plaats van dat het enkel een opmaak-element is.